1、border ->消除border继承的影响,可写border: none;
(1).聚焦点: border:1px solid #ccc; border-radius; border-image: url() xx stretch; box-shadow; outline:color style width;//元素轮廓,复合属性 ->outline:inherit;//其也可继承父元素
(2).border-radius可巧妙实现1/4圆、半圆、扇页;
2、background-color/image/repeat/origin/clip/size/position/attachment; ->建议拆分属性写 -> 背景图片/颜色包含content+padding,不包含border; 线性渐变: background-image: linear-gradient(to bottom,red 10px,yellow 50px);//聚焦点背景图片
补充:实现文字背景渐变(图片或渐变色都OK) ->巧妙使用background-clip:text;text-fill-color;//先将背景按着文字进行“裁剪”,然后将文字颜色设置为透明色即可; ->其只在webkit内核浏览器可用; 设置color和text-fill-color皆可,text-fill-color定义的颜色权重大于color
3、文本 ->text-shadow(同文本可写多个);/white-space;/text-overflow;/text-align;/text-indent;/text-decoration; @font-face;//开发中有很多情况把“图标”也当作字体引入(少量图标);
@font-face{};@import url();@keyframes{};//这些都是直接在样式中使用即可多列布局 ->column-count;/column-gap;/column-rule;/column-span;
4、颜色值: #000;rgba(0,0,0,0);//黑色 ->rgb:光学三原色;美术三原色:红、黄、青 hsl();//色相、饱和度、亮度
网友评论