14圆角,设置背景,背景蒙版,阴影,渐变
01圆角
border-radius 设置圆角
border-radius:左上 右上 右下 左下;
左上 != 右下 右上 = 左下
border-radius:左上 右上 右下;
左上 = 右下 右上 = 左下
border-radius:左上 右上;
左上 = 右下 = 右上 = 左下
border-radius:左上;
实质上,每一个角的上面,都有一个水平半径和一个垂直半径,如果每一个方向上的半径不同,
则需要写成 水平半径/垂直半径
注意,圆角的值也可以设置百分比,一般的制作一个园形,可以直接设置 50%
02设置背景
background-origin 设置背景图渲染的起始位置
值
padding-box 默认值,从padding位置开始渲染
content-box 从内容部分开始渲染
border-box 从border 开始渲染
background-size 设置背景图片的填充方式,也就是设置背景图大小
值:
cover 以最短边为基础渲染图片,长边按比例缩放,有可能无法显示全部图片
contain 以长边为基础渲染图片,短边按比例缩放
值还可以是以下写法
background-size:宽度 高度;
如果只写一个宽度,高度按照比例渲染
宽度和高度可以是具体的数值,也可以是相对于所在元素的百分比
03背景蒙版
背景蒙版 mask
1.最初只有 谷歌浏览器支持
2.背景蒙版可以把 透明图的透明部分转化为不透明,把不透明的渲染为透明
3.他的设置方式和背景一致
04浏览器前缀
-webkit- :是谷歌、苹果等浏览器内核的前缀
-moz-: 是火狐浏览器内核的前缀
-ms-: 是IE浏览器内核的前缀
-o-: 欧朋浏览器内核的前缀
在css属性名之前添加 浏览器前缀,表示该css属性是浏览器的私有属性
05阴影
box-shadow 设置阴影
box-shadow: x轴方向偏移量,y方向的偏移量 阴影的发散度(模糊度) 阴影的宽度 阴影的颜色 阴影的位置(可以忽略)
inset 设置内阴影
box-shadow: 10px 10px 20px 0 #ff0 inset;
设置多组阴影,使用英文,逗号隔开,设置的方式一样
注意:在元素上设置阴影通常是为了增强元素的立体感,阴影不占据文档流空间,因此不会引起元素盒模型的变化
.wp3{
box-shadow: 0 0 50px 2px #f60 inset;
}
.wp4{
box-shadow: 10px 0 0 0 #f00, -10px 0 0 0 #f0f, 0 -10px 0 0 #ff0,0 10px 0 0 #04be02;
}
06渐变
渐变,至少IE10支持
渐变也是背景图的一种
1.线性渐变
background: linear-gradient(to 方向,颜色 开始渐变的位置,颜色 开始渐变的位置,......)
linear-gradient 里面的参数
1.to 方向,方向可以使用具体的方向单词,也可以使用角度度数
如果是度数,则直接写具体角度,不需要加to
正值:顺时针旋转
0 -> 向上
90 -> 向右
180 -> 向下
负值:逆时针旋转
开始渐变的位置 可以是具体的数值,也可以是百分比
2.径向渐变
radial-gradient 设置径向渐变
radial-gradient(半径 形状 at 圆心,颜色 渐变的开始位置,颜色 渐变的开始位置,......)
形状的可选值:
1.circle 圆形,默认值,可以省略
半径可以是具体的数值,也可以是如下系统给定的值:
farthest-corner 最远角
closest-corner 最近角
farthest-side 最远边
closest-side 最近边
圆心的设置
1.可以是具体数值,第一个数字代表x轴方向,第二个数值代表y轴方向
2.可以是 left top right bottom center 等方向名词的组合
渐变的开始位置
1.可以是具体数值
2.可以是百分比,百分比是以半径长度为基准