CSS样式笔记：

CSS样式笔记（部分重要）：

取消一个标签的默认样式:

i{font-style:nomal}

当子元素大于父元素时隐藏/滚动显示：

//隐藏
overflow：auto；
//滚动显示
overflow hidden；

文本的首行缩进：

text-indent: 1rem;

圆角效果：分别为( 左上 右上 右下 左下 )

border-radius:1rem 1rem 1rem 1rem ;

当子元素显示在父元素里时，采用父元素相对定位，子元素绝对定位

 /* 相对定位 */
position: relative;
 /* 绝对定位 */
position: absolute;

边框样式：

border:0;

结构伪类选择器与线性渐变颜色：

.card .card-item:nth-child(1){
    /* 线性渐变颜色 */
  background:linear-gradient(#33b039,#E99387);
}
.card .card-item:nth-child(2){
  background:linear-gradient(#e635ad,#f0f04a);
}
.card .card-item:nth-child(3){
  background:linear-gradient(#3923de,#14d118);
}
.card .card-item:nth-child(4){
  background:linear-gradient(#1927c0,#b9149b);
}

镜像渐变：

background-image: radial-gradient(circle at left 50% , #fff 10px,transparent 10px),radial-gradient(circle at right 50% , #fff 10px,transparent 10px);

多行文本溢出省略

    /* 多行文本溢出显示省略号 */
    display: -webkit-box;
    /* 子元素排列的方式：纵向 */
    -webkit-box-orient: vertical;
    /* 显示文本行数 */
    -webkit-line-clamp: 2;
    /* 隐藏超出范围的文本 */
    overflow: hidden;

CSS3新特性：

新增选择器：

p~ul : 选择前面有<p>标签的每个<ul>元素

a[ src^="https" ] : 选择其属性值以"https"开头的每个<a>元素

a[ src$=".pdf" ] : 选择其属性值以".pdf"结尾的每个<a>元素

a[ src*="abc" ] : 选择其src属性里包含"abc"字段的每个<a>元素

新增样式：

边框：

border-radius : 创建圆角边框

box-shadow : 为元素添加阴影

border-image : 使用图片来绘制边框

box-shadow : 设置元素阴影，属性为：水平阴影，垂直阴影，模糊距离，阴影尺寸，阴影颜色，内/外阴影，其中只有水平和垂直阴影是必须的

背景：

background-clip : 确定背景画区，有几种可能的属性（border-box : 背景从border开始显示；padding-box : 背景从padding开始显示 ; content-box : 背景从content区域开始显示；no-cilp : 默认属性，等于border-box。）

background-origin : 用于确定背景图片以border的左上角对齐还是padding的左上角或者content的左上角对齐（属性值：border-box，以border开始计算background-position；padding-box，以padding开始计算background-position；content-box，以content开始计算background-position；）

background-size : 用于调整背景图片的大小，主要用于设定图片本身。（有以下可能的属性：contain : 缩小图片以适合元素（维持像素长宽比）; cover : 扩展元素以填补元素（维持像素长宽比）；若属性是像素大小或百分比，意味着指定图片大小尺寸）

background-break : 元素可以被分为几个独立的盒子（如使内联元素span跨越多行），background-break属性是用来控制背景如何在这些不同的盒子中显示（属性值 ： continuous : 默认值，忽略盒子之间的距离，就像是没有分成多个盒子一样；bounding-box : 把盒子之间的距离计算在内；each-box : 为每一个盒子单独重绘背景）

文字：

word-wrap : 属性值（normal : 使用浏览器默认的换行 ; break-all : 允许在单词内换行）

text-overflow : 用于设置或者检索当当前行超过指定容器的边界时如何显示，属性值（clip : 修建文本 ; ellipsis : 显示省略符号来代表被修剪的文本）

text-shadow : 用于文本的阴影，能够规定水平、垂直阴影，模糊距离以及阴影的颜色

text-decoration : 属性值（text-fill-color : 设置文字内部的填充颜色 ; text-stroke-color : 设置文字边界的填充颜色 ;text-stroke-width : 设置文字边界宽度 ;）

颜色：

新增了颜色的表示方式：rgba 与 hsla

rgba分为了两部分，rgb为颜色值，a为透明度

hsla分为四部分，h为色相，s为饱和度，l为亮度，a为透明度