美文网首页全栈记
2 CSS3 边框、背景、文本(column多列布局)、颜色

2 CSS3 边框、背景、文本(column多列布局)、颜色

作者: 官清岁月 | 来源:发表于2019-05-10 18:28 被阅读3次

    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();//色相、饱和度、亮度

    相关文章

      网友评论

        本文标题:2 CSS3 边框、背景、文本(column多列布局)、颜色

        本文链接:https://www.haomeiwen.com/subject/ivgdhqtx.html