美文网首页全栈记
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多列布局)、颜色

    1、border ->消除border继承的影响,可写border: none; (1).聚焦点: border:...

  • CSS笔记-2017-9-11

    边框 背景 文本 2D 样式的过渡 动画 多列 div{column-count:5; //文本5列} 用户界面

  • 【一起来烧脑】一步学会CSS3体系

    CSS3 完全向后兼容 选择器、框模型、背景和边框、文本效果、2D/3D转换、动画、多列布局、用户界面 box-s...

  • css3新增属性

    css3被划分为模块,最重要的几个模块包括:选择器、框模型、背景和边框、文本效果、2D/3D 转换、动画、多列布局...

  • CSS3

    css3被划分为模块,最重要的几个模块包括:选择器、框模型、背景和边框、文本效果、2D/3D 转换、动画、多列布局...

  • css3 新特性

    一、css3的新选择器 二、文本 三、边框 四、背景 五、渐变 六、多列布局 七、过渡 八、动画、旋转 九、fle...

  • CSS3多列布局

    定义列数column-count 在CSS3的多列布局中,我们可以使用column-count属性指定多列布局的列...

  • 布局之多列布局(multi-column)

    css3中新出现的多列布局(multi-column)是对html布局模式的有力扩充,它能轻松的让文本呈现多列显示...

  • CSS3 多列

    通过 CSS3,您能够创建多个列来对文本进行布局 - 就像报纸那样! 一、column-count 创建多列 co...

  • css3多列布局及flex布局

    一:css3多列布局 column-count:3; 内容有几列 column-gap:40px; 列于列之间...

网友评论

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

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