大家好，欢迎来到IT知识分享网。
css3新增样式
border-radius: 1-4 length|% / 1-4 length|%;
/* xy合并参数写法 */
border-radius: 10px 20px 30px 40px;border-radius: top-left top-right bottom-right bottom-left
/* 全参数写法 */
border-radius: 10px 20px 30px 40px / 40px 30px 20px 10px;border-radius: top-left-x top-right-x bottom-right-x bottom-left-x / top-left-y top-right-y bottom-right-y bottom-left-y
1.border-radius 圆角边框,给盒子添加边角.
border-radius: 50%
; 指对应盒子宽度高度的50%;
border-radius: 4px; 指边框左上 右上 右下 左下四个角弧度为 4px
用法和边框属性一样,可以四角分别设置.
下面是复合写法与单例写法:
复合写法:
border-radius: 2em;
单例写法:
border-top-left-radius: 2em; 上左圆角边框;
border-top-right-radius: 2em;
border-bottom-right-radius: 2em;
border-bottom-left-radius: 2em;
复合写法1-4个值对应:
- 一个值: 左上右上左下右下
- 两个值: 左上右下 右上左下
- 三个值:左上 右上左下 右下
- 四个值:左上 右上 右下 左下
2.box-shadow 边框阴影,也可以用来做叠加,给盒子添加阴影效果.
box-shadow: h-shadow v-shadow blur spread color inset;
box-shadow: 22px -10px 10px 0 #cc insert;
第一个值: x偏移量;
第二个值: y偏移量;
第三个值: 模糊半径;
第四个值: 扩展半径;
第五个值: 阴影颜色;
第六个值: 阴影模式{向内/向外};
| 值 | 参数 | 描述 |
|---|---|---|
| h-shadow | 必需的。水平阴影的位置。允许负值 | 阴影水平偏移量，其值可以是正负值。如果值为正值，则阴影在对象的右边，其值为负值时，阴影在对象的左边 |
| v-shadow | 必需的。垂直阴影的位置。允许负值 | 阴影垂直偏移量，其值也可以是正负值。如果为正值，阴影在对象的底部，其值为负值时，阴影在对象的顶部 |
| blur | 可选。模糊距离 | 此参数可选，，但其值只能是为正值，如果其值为0时，表示阴影不具有模糊效果，其值越大阴影的边缘就越模糊 |
| spread | 可选。阴影的大小 | 此参数可选，其值可以是正负值，如果值为正，则整个阴影都延展扩大，反之值为负值时，则缩小 |
| color | 可选。阴影的颜色。rgba hex rgb | 此参数可选。如不设定颜色，浏览器会取默认色，但各浏览器默认取色不一致，特别是在webkit内核下的safari和chrome浏览器下表现为透明色，在Firefox/Opera下表现为黑色（已验证），建议不要省略此参数 |
| inset | 可选。从外层的阴影（开始时）改变阴影内侧阴影 | 此参数可选。如不设值，默认投影方式是外阴影；如取其唯一值“inset”，其投影为内阴影 |
box-shadius的属性值 可以叠加,就是一个属性可以设置多个值,用逗号分隔
box-shadow: h-shadow v-shadow blur spread color inset,
h-shadow v-shadow blur spread color inset;
3.渐变色,可以让你在两个或多个颜色之间显示平稳的过渡.
css3的渐变类型:
- 线性渐变(linear gradients)
- 径向渐变(radial gradients)
线性渐变_____________________
background-image: linear-gradient(#e66465, #9198e5);
从上到下渐变(默认情况)
background-image: linear-gradient(to right, red, green);
从左到右
background-image: linear-gradient(to bottom right, red, blue);
从左上到右下;
backgroun-image: linear-gradient(-90deg, red, blue);
从任意角度渐变
这里任意角度-90deg表示将创建一个从右到左的渐变,角度是指水平线和渐变线之间的角度.
但是,请注意很多浏览器都使用的是老的旧标准,即0deg将创建一个从左到右的渐变,90deg将创建一个从上到下的渐变.公式为90 – x = y 其中 x 为标准角度，y为非标准角度。
多种颜色
background-image: linear-gradient(to right, red, blue, orange, yellow, green, blue, indigo, violet);
使用透明度
~~~
background-image: linear-greadient(to right, rgba(255,0,0,0), rgba(255,0,0,1));
~~~
重复线性渐变
background-image: linear-gredient(circle, red, yellow 10%, green 20%);
径向渐变_________________
中心向外扩展.
background-image: radial-gradient(shape, size, at posiition, start-color, ..., last-color);
注:shape 形状 circle圆形 ellipse 椭圆形 默认是椭圆
示例:
background-image: radial-gradient(red, green, yellow);
默认渐变
background-image: radial-gradient(red 5%, yellow 10%, green 10%); 按照比例渐变
background-image: radial-gradient(circle, red, yellow, green); 按照形状渐变,默认是椭圆
background-image: repeating-radial-gradient(red, yellow 10%, green 15%); 重复渐变
免责声明：本站所有文章内容,图片，视频等均是来源于用户投稿和互联网及文摘转载整编而成，不代表本站观点，不承担相关法律责任。其著作权各归其原作者或其出版社所有。如发现本站有涉嫌抄袭侵权/违法违规的内容,侵犯到您的权益，请在线联系站长,一经查实,本站将立刻删除。 本文来自网络,若有侵权，请联系删除，如若转载，请注明出处：https://yundeesoft.com/14799.html
