CSS3常用属性（颜色、边框和渐变等）

╰半夏微凉° 2021-12-07 11:19 384阅读 0赞

本文笔记基于「千古壹号」的GitHub项目：https://github.com/qianguyihao/web

### 文章目录 ###

*  1.介绍
 *  2.具体属性
 *   *  2.1 颜色
     *  2.2 文本
     *  2.3 盒模型中的 box-sizing 属性
     *  2.4 处理兼容性问题：私有前缀
     *  2.5 边框
     *   *  2.5.1 边框圆角
         *  2.5.2 边框阴影
         *  2.5.3 边框图片
     *  2.6 背景属性
     *  2.7 渐变
     *   *  2.7.1 线性渐变
         *  2.7.2 径向渐变

# 1.介绍 #

*  颜色
 *  文本
 *  盒模型中的 box-sizing 属性
 *  处理兼容性问题：私有前缀
 *  边框
 *  背景属性
 *  渐变

# 2.具体属性 #

## 2.1 颜色 ##

1.增加了透明度A

2.两种方式

*  rgba(0, 0, 255, 0.3);
 *  hsla(240,50%,50%,0.4);

3.设置透明度的其他方式

*  opacity: 0.3， 会将整个盒子及子盒子设置透明度。
 *  background: transparent; 可以**单独设置透明度**，但设置的是完全透明（**不可调节透明度**）。

## 2.2 文本 ##

1.text-shadow：设置文本的阴影，如：

text-shadow: 20px 27px 22px pink;//水平位移 垂直位移 模糊程度 阴影颜色。

2.应用：凹凸文字效果（可以设置多个阴影，用逗号隔开）

## 2.3 盒模型中的 box-sizing 属性 ##

box-sizing: content-box;//标准盒模型
    box-sizing: border-box;//IE盒模型

## 2.4 处理兼容性问题：私有前缀 ##

*  \-webkit-: 谷歌 苹果
 *  \-moz-:火狐
 *  \-ms-：IE
 *  \-o-：欧朋

## 2.5 边框 ##

*  边框圆角
 *  边框阴影
 *  边框图片

### 2.5.1 边框圆角 ###

*  详细解释参考百度经验：https://jingyan.baidu.com/article/1876c852549b2a890b1376bf.html
 *  边框默认为矩形直角，但添加border-radius属性后4个角就发生变化了，值一般设置水平和垂直方向的半径。**本demo中width=height=100px**
 *  圆形：

border-radius: 100px;//=width
    border-radius: 50px;//=width/2
    border-radius: 50%;//方法2

其中选择盒子可以用前一篇的方式：

.box:nth-child(1) { }

*  扇形：

border-radius: 100px 0 0 0;

从左上角开始，顺时针方向。

*  水平/垂直方向：？

border-radius: 100px/50px;
    border-radius: 50px/25px;//效果同上，但其余2倍关系表示则不同

![在这里插入图片描述][20190716195725645.png_pic_center]

*  四个角统一：

border-radius: 10%;

*  左上与右下 其余：

border-radius: 100px 50px;

### 2.5.2 边框阴影 ###

//box-shadow: 水平偏移 垂直偏移 模糊程度 阴影大小 阴影颜色
    box-shadow: 15px 21px 48px -2px #666;

### 2.5.3 边框图片 ###

border-image-source: url("images/border.png");
    	border-image-slice: 27;	/* 图片边框的裁剪*/
    	border-image-width: 27px;
    	border-image-repeat: stretch;/* repeat :正常平铺 但是可能会显示 不完整；round: 平铺 但是保证 图片完整；stretch: 拉伸显示*/

border-image: url("images/border.png") 27/20px round;

## 2.6 背景属性 ##

1.背景原点：background-origin ，控制背景从什么地方开始显示，举例：

background-origin: padding-box;

2.背景裁剪：background-clip

background-origin: border-box;//超出 border-box 的部分，将裁剪掉

3.设置多个背景：以逗号隔开即可。可用于自适应布局。

## 2.7 渐变 ##

### 2.7.1 线性渐变 ###

1.语法

*  **linear-gradient(方向，起始颜色，终止颜色);**
 *  方向：由to top， to right等，不写方向，默认从上到下

2.指定角度，从**左边水平顺时针**开始：如135度，