边框
边框的三要素
线宽度、线型、线颜色
border:1pxsolid#000;
线型(常见):solid(实线)、dashed(虚线)、dotted(点状线)
边框的三要素小属性
border-width
border-style
border-color
四个方向的边框
border-top
border-right
border-bottom
border-left
四个方向边框的三要素小属性_用来层叠大属性
border-top -width
border-top -style
border-top -color
border-right -width
border-right -style
border-right -color
border-bottom -width
border-bottom -style
border-bottom -color
border-left -width
border-left -style
border-left -color
去掉边框
border-left:none;属性即可去掉左边框,以此类推
利用边框制作三角形
.box{
width:0;
height:0;
/*transparent表示透明色*/
border:20pxsolidtransparent;
border-top-color:red;
}
圆角
border-radius属性的值通常为px单位,表示圆角的半径
border-radius:10px;
利用圆角制作圆形
border-radius属性的值=盒子width的一半
单独设置四个圆角
border-radius:10px20px30px40px;顺序为左上、右上、右下、左下(顺时针)
也可以用小属性_用来层叠大属性
border-top-left-radius
border-top-right-radius
border-bottom-left-radius
border-bottom-right-radius
百分比为单位:border-radius属性的值可以用百分比做单位,表示圆角起始于每条边的哪里
border-radius:20%;
正圆形:正方形盒子设置的border-radius属性为50%
椭圆形:长方形盒子设置的border-radius属性为50%
盒子阴影
box-shadow属性
box-shadow:10px20px30pxrgba(0,0,0,.4); x偏移 y偏移 模糊量 颜色
阴影延展
box-shadow:10px20px30px 40pxrgba(0,0,0,.4); x偏移 y偏移 模糊量 阴影延展 颜色
40px是阴影延展
内阴影
box-shadow属性值前加inset单词,表示内阴影
box-shadow:inset10px20px30px 40pxrgba(0,0,0,.4);
多阴影
box-shadow属性可以用逗号隔开多个,表示携带多个阴影
box-shadow:10px20px30pxrgba(0,0,0,.4),10px20px30pxrgba(250,0,0,.6),inset10px20px30px 40pxrgba(0,0,0,.4);
背景
背景颜色
background-color属性 背景颜色
背景颜色可以用十六进制、rgb()、rgba()表示法表示
注:padding区域有背景颜色
背景图片
background-image属性用来设置背景图片,图片路径要写到url()圆括号中,可以是相对路径,也可以是http://开头的绝对路径。
background-image:url(images/bg1.jpg);
注:如果样式表示外链式的,那么要书写从css出发到图片的路径,而不是从html出发
背景图片的重复模式
background-repeat属性用来设置背景的重复模式
值 意义
repeat; x,y均平铺(默认值)
repeat-x; x平铺
repeat-y; y平铺
no-repeat; 不平铺
背景尺寸
background-size属性用来设置背景图片的尺寸,兼容到IE9
background-size:100px200px; 宽度100像素,高度200像素
值也可以用百分数来设置,表示为盒子宽、高的百分之多少
需要等比例设置的值,写auto
background-size:100pxauto;
contain和cover是两个特殊的background-size属性的值
contain:将背景图片智能改变尺寸以容纳到盒子里:让用户看完整整张图片,不管盒子满不满
cover:将背景图片智能改变尺寸以撑满盒子:让用户看到盒子被图片盖满,不管图片完不完整
背景裁切
background-clip属性用来设置元素的背景裁切到哪个盒子,兼容到IE9
值 意义
border-box 背景延伸至边框(默认值)
padding-box 背景延伸至内边(padding),不会绘制到边框(仅在dotted、dashed边框可察觉)
content-box 背景被裁减至内容区
背景起源:
background-origin:content-box;
背景固定
background-attachment属性决定背景图像的位置在视口内固定,或者随着包含它的区块滚动
值 意义
fixed 自己滚动条不动,外部滚动条不动
local 自己滚动条动,外部滚动条动
scroll 自己滚动条不动,外部滚动条动(默认值)
背景图片位置
background-position属性可以设置背景图片出现在盒子的什么位置
background-position:100px200px;
可以用top、bottom、center、left、right描述图片出现的位置
background-position:centercenter;
css精灵
将多个小图标合并制作到一张图片上,使用background-position属性单独显示其中一个,这样的技术叫做css精灵,也叫做css雪碧图
css精灵可以减少HTTP请求数,加快网页显示速度。缺点就是不方便测量,后期改动麻烦
background综合属性
一些常用的背景相关小属性可以合写到一条background属性中
background:whiteurl(images/IMG_0063.JPEG)no-repeatcentercenter;
线性渐变
盒子的background-image属性可以用linear-gradient()形式创建线性渐变背景
background-image:linear-gradient(toright,blue,red);渐变方向,开始颜色,结束颜色
渐变方向也可以写成度数
background-image:linear-gradient(45deg,blue,red);deg表示度数
可以有多个颜色值,并且可以用百分数定义它们出现的位置
background-image:linear-gradient(toright,blue,yellow 20%,red);
浏览器私有前缀
不同浏览器有不同的私有前缀,用来对试验性质的css属性加以标识
径向渐变
盒子的background-image属性可以用radial-gradient()形式创建径向渐变背景
background-image:radial-gradient(50%50%,blue,red);