CSS学习笔记_day7
目录
1、径向渐变
2、 线性渐变
3、 背景图片裁剪
4、 背景图片大小
5、 边框图片
6、 边框圆角
7、 边框阴影
8、位移
9、 倾斜
10、 旋转
11、 缩放
12、 文本换行
13、 文本溢出
1、径向渐变
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
p{
width: 500px;
height: 500px;
border: 2px solid black; } p:first-child{
background-image: radial-gradient(red,orange,yellow,green,cyan,blue,purple);
/*设置径向渐变 没有设置渐变方向 默认中心点开始煎饼*/
} p:nth-child(2){ border-radius: 50%;
/*变成球*/
background-image: radial-gradient(450px at top left,white 30%,red 70%,black 100%); /*100px at top left 整个渐变的大小就是100px at top left将其定义到顶端 450Px渐变在450长度中产生*/ background-image: radial-gradient(450px at 30px 20px,white 30%,red 70%,black 100%);
/*渐变从30px 20px开始 即设置他的定位点 定义圆心*/ }
</style>
</head>
<body>
<p>我是径向渐变</p>
<p>我是个球</p>
</body>
</html>
2、线性渐变
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
p{
width: 200px;
height: 200px;
border: 1px solid red;
color: #ffffff;
}
p:nth-child(1) {
/*第一个孩子*/ background-image: linear-gradient(to bottom, red, blue);
/*linear-gradient表示设置线性渐变*/
/*方向 起始的颜色 最后的颜色*/ background-image: linear-gradient(to left, red, blue);
/*从右向左*/ }
p:nth-child(2){
background-image: linear-gradient(90deg,red 0,yellow 45%,green 80%,purple 100%);
/*0是从底部往上 180是从上往下 90度是左边 270度右边 360度底部*/
/*左边是0% 到405%的地方是黄色到下一个是黄色的过渡阶段*/
} </style>
</head>
<body>
<p>
我是线性渐变
</p>
<p>我是线性渐变</p>
</body>
</html>
3、背景图片裁剪
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
div{
width: 600px;
height: 600px;
margin: 200px auto;
border: 100px solid rgba(255,0,0,0.1); background-image: url(../imgs/gq1.jpg);
background-repeat: no-repeat;
padding: 60px; /*以下为内容裁切和内容定位*/ background-clip: border-box;
/*边框部分*/
background-origin: border-box;
/*内容部分是相对于border部分开始的*/
/*两天命令基本都是连起来用的*/ /*background-clip: padding-box;*/
/*页边距部分*/
/*background-origin: padding-box;*/ /*background-clip: content-box;*/
/*background-clip 把背景图片剪裁到内容区域*/*/ /*background-origin: content-box;*/
/*设置背景图片是相对内容来定位*/
}
</style>
</head>
<body>
<div></div>
</body>
</html>
4、背景图片大小
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
div{
width: 500px;
height: 500px;
border: 2px solid green;
background-image: url(../imgs/gq2.jpg);
margin: 200px auto;
background-repeat: no-repeat; /*background-size: 400px 200px;*/
/*可以控制背景图片的宽和高*/ background-size: cover;
/*cover会覆盖整个盒模型*/ background-size: contain;
/*按照某条边的比例去计算 选择最大的那条边 保证最大那条边被覆盖*/ }
</style>
</head>
<body>
<div> </div>
</body>
</html>
5、边框图片
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.d1{
width: 600px;
height: 600px;
border:1px solid black;
background-color: rgb(33,200,100);
border-image-source: url("imag/1.png");
/*切割方式1*/
/*切割之后的四角*/
border-image-slice:;
/*切割之后中间部分*/
border-image-width: 100px;
/*切割后中间部分重复*/
border-image-repeat:repeat;
/*边向外扩散100*/
border-image-outset:;
margin:300px auto; } </style>
</head>
<body>
<div class="d1">切割之后的四角</div> </body>
</html>
6、边框圆角
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.d1 {
width: 500px;
height: 500px;
background-color: yellow;
/*边框变成圆*/
border-radius: 50%;
margin:0 auto;
}
.d2 {
width: 500px;
height: 500px;
background-color: yellow;
/*顺时针*/
border-radius: 10px 50px 90px 180px;
margin:0 auto;
}
.d3 {
width: 500px;
height: 500px;
background-color: yellow;
/*只改左上圆角*/
border-top-left-radius: 150px;
margin:0 auto;
}
</style>
</head>
<body>
<div class="d1">d1</div>
<div class="d2">d2</div>
<div class="d3">d3</div>
</body>
</html>
7、边框阴影
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.a1{ width: 500px;
height: 500px;
background-color: yellow;
margin:300px auto;
/*添加阴影*/
/*可以写正负值，（x轴偏移，y轴偏移，模糊程度，颜色）*/
box-shadow: -30px -30px 50px black;
}
.a2 {
width: 500px;
height: 500px;
background-color: yellow;
margin:300px auto;
border-radius: 50%;
/*内阴影*/
box-shadow:inset -50px -50px 100px black;
}
</style>
</head>
<body>
<article class="a1"></article>
<article class="a2"></article>
</body>
</html>
8、位移
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.d1{
width: 400px;
height: 400px;
background-color: gold;
transition: 3s; }
.d2{
width: 400px;
height: 400px;
background-color: blue;
transition: 3s;
/*设置位移动作发生的的时间*/
} .d1:hover{
transform:translate(400px,400px);
/*默认往右*/
} .d2:hover{
transform:translate(0,400px);
/*默认往右*/ transform:translateY(0,400px);
/*控制盒子移动方向仅为Y轴*/
}
</style>
</head>
<body>
<div class="d1">我是盒子1号</div>
<div class="d2">我是盒子2号</div>
</body>
</html>
9、倾斜
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
div{
width: 500px;
height: 500px;
border: 1px solid red;
margin: 300px auto;
transition: 3s;
}
.d1:hover{
transform: skew(45deg);
/*做变换都用transform*/
background-color: red;
/*倾斜的中心点在中心*/
}
.d2:hover{
/*transform: skew(-45deg);*/
/*transform: skew(-45deg,30deg);*/
/*一个参数表示旨在x轴方向倾斜 两个参数表示xy两个方向倾斜相应的角度*/
transform: skewY(-45deg,30deg);
/*加个Y表示只在y轴方向倾斜*/
background-color: yellow;
transform-origin: left;
/*绕着某条边倾斜 一般绕y轴方向的左右两边倾斜*/
background-color: yellow;
} </style> <!--ps描边效果-->
<!--多边形套索工具-->
<!--con+j-->
<!--fx 添加图层样式 描边为白色-->
<!--c+s保存成png格式-->
</head>
<body>
<div class="d1"></div>
<div class="d2"></div>
</body>
</html>
10、旋转
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
div{
width: 500px;
height: 500px;
border: 2px solid red;
margin-bottom: 50px;
background-color: green;
margin: 150px auto;
}
/*基本样式*/ .d1{
background-color: green;
transition: 3s;
} .d2 {
background-color: yellow;
transition: 3s;
} .d1:hover{
transform: rotate(45deg);
/*表示旋转度数 正值为顺时针 负值为逆时针*/
background-color: red;
} .d2:hover{
transform: rotate(-45deg);
/*表示旋转度数 正值为顺时针 负值为逆时针*/
background-color: gold;
transform-origin: top right; } </style>
</head>
<body>
<div class="d1">我要顺时针</div>
<div class="d2">我要逆时针绕着右上角旋转</div>
</body>
</html>
11、缩放
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
*{
padding:;
margin:;
} div{
width: 500px;
height: 500px;
border: 2px solid red;
margin: 500px auto;
} p{
width: 500px;
height:500px;
border: 2px solid blue;
transition: 3s;
/*动画播放时长*/
} p:hover{
/*transform: scale(2);*/
/*一个参数默认xy两个方向都有位移*/ transform: scale(0.5,2);
/*在x轴上缩小为0.5 y轴上放大为2*/
}
</style>
</head>
<body>
<div>
<p>我现在170，我要长到180</p>
</div>
</body>
</html>
12、文本换行
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
div{
width: 200px;
height: 100px;
border:1px solid red;
}
/*设置字母换行 */
#d1{
width: 200px;
height: 100px;
border:1px solid red;
word-break:break-all;
}
/*设置文字在空格处换行*/
/*只有遇到边框才会换行*/
#d2{
width: 200px;
height: 100px;
border:1px solid red;
word-break:keep-all;
}
</style>
</head>
<body>
<div>
我要换行我要换行我要换行我要换行我要换行
</div>
<!--没法识别英文单词，无法实现换行-->
<div>
hgdsygdiebndzgfstfdyuagefjwbghktyfssluhiodvssyufye
</div>
<!--英文字母换行：设置word-break-->
<div id="d1">
hgdsygdiebndzgfstfdyuagefjwbghktyfssluhiodvssyufye
</div>
<!--文字遇到边框在空格处换行-->
<div id="d2">
我要换行 我要换行我要换行 我要换行我要换行我怕就要汉化我要换号 我要换行我要换行我怕就要汉化我要换号我要换行 我要换行我要换行我怕就要汉化我要换号我要换行我要换行我怕就要汉化我要换号
</div>
</body>
</html>
13、文本溢出
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.d0 {
width: 50px;
height: 100px;
border:1px solid blue;
/*设置文本不换行white-space*/
white-space:nowrap;
}
.d1 {
width: 50px;
height: 100px;
border:1px solid blue;
/*设置文本不换行white-space*/
white-space:nowrap;
/*溢出隐藏*/
overflow: hidden;
}
.d2 {
width: 50px;
height: 100px;
border:1px solid blue;
/*设置文本不换行white-space*/
white-space:nowrap;
/*隐藏*/
overflow:auto;
}
.d3 {
width: 50px;
height: 100px;
border:1px solid blue;
/*设置文本不换行white-space*/
white-space:nowrap;
/*隐藏*/
/*裁掉后面不显示的部分*/
text-overflow: clip;
}
.d4 {
width: 50px;
height: 100px;
border:1px solid blue;
/*设置文本不换行white-space*/
white-space:nowrap;
/*隐藏*/
/*省略后面不显示的部分*/
text-overflow: ellipsis;
} </style>
</head>
<body>
参照
<div class="d0">我最喜欢红欧盟里面的林黛玉林贝贝</div>
hidden
<div class="d1">我最喜欢红欧盟里面的林黛玉林贝贝</div>
auto
<div class="d2">我最喜欢红欧盟里面的林黛玉林贝贝</div>
clip
<div class="d3">我最喜欢红欧盟里面的林黛玉林贝贝</div>
ellipsis
<div class="d4">我最喜欢红欧盟里面的林黛玉林贝贝</div> </body>
</html>
2018-07-10 20:26:02 擢摩一下改 于教室
CSS学习笔记_day7的更多相关文章
- CSS学习笔记
CSS学习笔记 2016年12月15日整理 CSS基础 Chapter1 在console输入escape("宋体") ENTER 就会出现unicode编码 显示"%u ...
- HTML+CSS学习笔记 (7) - CSS样式基本知识
HTML+CSS学习笔记 (7) - CSS样式基本知识 内联式css样式,直接写在现有的HTML标签中 CSS样式可以写在哪些地方呢?从CSS 样式代码插入的形式来看基本可以分为以下3种:内联式.嵌 ...
- HTML+CSS学习笔记 (6) - 开始学习CSS
HTML+CSS学习笔记 (6) - 开始学习CSS 认识CSS样式 CSS全称为"层叠样式表 (Cascading Style Sheets)",它主要是用于定义HTML内容在浏 ...
- HTML+CSS学习笔记（5）- 与浏览者交互，表单标签
HTML+CSS学习笔记(5)- 与浏览者交互,表单标签 1.使用表单标签,与用户交互 网站怎样与用户进行交互?答案是使用HTML表单(form).表单是可以把浏览者输入的数据传送到服务器端,这样服务 ...
- HTML+CSS学习笔记(4) - 认识标签（3）
HTML+CSS学习笔记(4) - 认识标签(3) 1.使用<a>标签,链接到另一个页面 使用<a>标签可实现超链接,它在网页制作中可以说是无处不在,只要有链接的地方,就会有这 ...
- HTML+CSS学习笔记（3）- 认识标签（2）
HTML+CSS学习笔记(3)- 认识标签(2) 1.使用ul,添加新闻信息列表 在浏览网页时,你会发现网页上有很多信息的列表,如新闻列表.图片列表, 这些列表就可以使用ul-li标签来完成.ul-l ...
- HTML+CSS学习笔记(2) - 认识标签（1）
HTML+CSS学习笔记(2) - 认识标签(1) 1.语义化,让你的网页更好的被搜索引擎理解 标签的用途: 我们学习网页制作时,常常会听到一个词,语义化.那么什么叫做语义化呢,说的通俗点就是:明白每 ...
- HTML+CSS学习笔记(1) - Html介绍
HTML+CSS学习笔记(1) - Html介绍 1.代码初体验,制作我的第一个网页 <!DOCTYPE HTML> <html> <head> <meta ...
- css学习笔记四
广州天气变冷了,css学习笔记还是要总结. 总结: 1:几米页面静态页面主要是一列结构头部banner图,mainbody部分放文字内容和图书图片,底部是页面的版权信息 2:腾讯软件中心静态页面制作( ...
随机推荐
- 8款非常不错的.Net反编译利器
本人搜集了下8款非常不错的.Net反编译利器: 1.Reflector Reflector是最为流行的.Net反编译工具.Reflector是由微软员工Lutz Roeder编写的免费程序.Refle ...
- sed命令总结-Linux
sed命令总结-Linux linuxsed 2018年02月08日 19时27分57秒 命令语法经常忘记,每次总是看笔记不切实际,记不起来的要多查manual,本次总结按照manual总结,希望下次 ...
- saltstack高效运维
saltstack高效运维 salt介绍 saltstack是由thomas Hatch于2011年创建的一个开源项目,设计初衷是为了实现一个快速的远程执行系统. salt强大吗 系统管理员日常会 ...
- Java小目标
看了智联.内推和拉勾这三个招聘网站,除了智联外,其它招聘网站对岗位要求的描述都比较专业.大部分公司都要求会一些HTML5.JS,SSH等前端技术,所有公司都要求会使用Oracle.MySQL等数据库, ...
- JS 清除DOM 中空白元素节点
HTML中的空白节点会影响整体的HTML的版面排榜 例如: 制作百度首页时,两个input之间的空白节点将本来是要整合在一起的搜索栏硬是把按钮和搜索框分离出现好丑的间隙 这时我们就可以用js清除这个空 ...
- CentOS7.4+OpenStack-Queens版本部署
一.准备工作.网络选择NAT 创建两台虚拟机:linux-node1.linux-node2 node1: 修改主机名 [root@localhost ~]# hostnamectl set-host ...
- 关于org.apache.jasper.JasperException解决方法
没有导入jstl.jar包 解决办法:在项目pom.xml中添加maven项目的jstl.jar 如果导入jstl.jar包 解决办法:检查jstl.jar版本是否与项目兼容,不兼容则切换jstl.j ...
- git pull提交代码遇到的问题
git pull 提示如下错误 解决方法: git pull 后面加上分支具体地址 比如:git pull origin daily/1.0.0 同样git push origin daily/1. ...
- Java冒泡法和二分法
最近去一家公司面试,手贱在人家CTO面前自告奋勇写了一把冒泡法,结果在交换数据的时候出了洋相,回家反思,写下如下代码,对自己算是一个鞭策,得到的教训是不要眼高手低,低调前行. package com. ...
- python 游戏 —— 汉诺塔(Hanoita)
python 游戏 —— 汉诺塔(Hanoita) 一.汉诺塔问题 1. 问题来源 问题源于印度的一个古老传说,大梵天创造世界的时候做了三根金刚石柱子,在一根柱子上从下往上按照大小顺序摞着64片黄金圆 ...