1.不透明度
(1)opacity 特点:设置透明度,如果设置父容器,那么父容器中的所有子元素也会透明
(2)rgba background-color:rgba(255,255,255,0.2) 透明度0-1
2. 边框圆角
1.border-radius:10px; 单独指定:border-top-right:50px;
2.border-radius:100px/50px;->效果是在x100 y 50长度来绘制一段弧形 用/表示设置当前不同方向上的半径值
3.border-radius:100px 80px 60px 40px/40px 60px 80px 100px 相当于前面的设置4个不同角
4.border-top-right-radius:20px; 设置单个方向上(右上角)的圆角
3. 渐变
1.background:linear-gradient(x deg color1 位置,color2 位置[,color3 位置…])
(1)线性渐变(注意渐变是设置背景,因为渐变是处理成图像)
(2)x deg可以是to top/bottom/left/right
(3)位置是可选的,位置的值为20%等
2.background: radial-gradient( shape,size,at x y,color1 位置,color2 位置) 径向渐变
(1)at x y 表示圆心坐标 at为关键字 (可选)
(2)shape:表示形状 ellipse/circle 椭圆/圆 ellipse:适配当前形状,如果是正方形容器,椭圆和圆效果一致(可选)
(3)size:表示渐变大小 closest-side/farthest-side/closest-corner/farthest-corner 最近边/最远边/最近角/最远角 默认最远角(可选)
(4)color:颜色取值 rgba
3.background:repeating-radial-gradient(#fff 0%,#fff 10%,#000 10%,#000 20%) 重复径向渐变
4.background:repeating-linear-gradient() 重复线性渐变
4. 背景
1.background-image:url() 背景图
(1)图片大于容器显示局部
(2)图片小余容器重复显示
2.background-repeat: 背景重复
(1)round 缩放之后平铺
(2)space 不缩放,有间距
3.background-attachment: 设置滚动容器背景的行为:跟随滚动/固定
(1)fixed 背景图固定不变
(2)scroll 跟随滚动
(3)local 与scroll区别:前提都是滚动当前容器的内容,local:背景图片会跟随内容一起滚动,scroll: 背景图片不会跟随内容一起滚动
4.background-size 背景尺寸
(1)auto 原始图片大小
(2)设置图片大小(一般设置一个值)
(3)百分之0-100%,百分比参照的是父容器 只能应用在块元素.
(4)cover 图片放大铺满容器,背景图片会按照容器进行缩放(不会有空白区域,但是图片可能显示不完全)
(5)contain 铺满 图片大于容器会缩小,图片小于容器会放大(可能会有空白区域)
5.background-position 设置背景图像的起始位置
(1)center
6.background-origin 规定background-position相对于什么位置来定位
(1)padding-box 相对于内边距来定位
(2)border-box 相对于边框来定位
(3)content-box 相对于内容框来定位
7.background-clip 背景图裁切
(1)padding-box 显示padding及以内的内容
(2)border-box 显示border及以内的内容
(3)content-box 显示content及以内的内容
5. 边框图片
原理:图片与容器一一对应,正中心为内容区域,1与2要配合使用.边框图片的本质是背景,不是边框.所以内容会在边框上面,解决办法是设置padding,或者边框宽度与图片裁切宽度一致
1.border-image-source 图片资源
2.border-image-slice 图片裁切设置x y 裁切的大小(是重复的 比如九宫格) 可以在后面添加fill让中间的图片内容填充
3.border-image-width 边框图片的宽度
4.border-image-outset 扩展边框(会让容器变大!!!),一般不用
5.border-image-repeat 边框图片重复
(1)repeat 直接重复平铺
(2)round 缩放平铺
6.缩写border-image:source slice / width/outset repeat;
