关于状态伪类选择器、CSS3字体、CSS3边框、CSS3背景、CSS3渐变、CSS3用户界面

2021-07-29 22:02:02 阅读：175 来源： 互联网

标签：CSS3 box 伪类 gradient 渐变 background 选择器 red

状态伪类选择器

:enabled
- 作用：选择器匹配每个已启用的元素
- 主要适用于：表单元素
:disabled
- 作用：选择器匹配每个被禁用的元素
- 主要适用于：表单元素
:checked
- 作用：选择器匹配每个已被选中的 input 元素
- 适用于：适用于单选按钮和复选框

[type="text"]:enabled{
    background-color: yellowgreen;
}
[type="text"]:disabled{
    background-color: #ccc;
}

[type="checkbox"]:checked{
    width:100px;
    height:100px;
}

兼容性

常用元素状态、用户行为伪类列表

伪元素选择器

:before

作用：在元素内部【最开始】位置生成内容 ---开始标签之后
语法：元素:before{content:"内容"}

:after

作用：在元素内部【最后】位置生成内容 - 结束标签之前
语法：元素:before{content:"内容"}

注：必须定义content属性

默认以行内形式存在

before与after 兼容性

说明：

双冒号支持ie9+
单冒号支持ie8+

:placeholder

主流浏览器四大内核：

webkit: -webkit-

gecko: -moz-

presto: -o-

trident: -ms-

设置对象文字占位符的样式
::placeholder 伪元素用于控制表单输入框占位符的外观，它允许开发者/设计师改变文字占位符的样式，
默认的文字占位符为浅灰色。

注：

<input type="text" placeholder="占位符" />

input::-webkit-input-placeholder {
    color: #999;
}
input:-ms-input-placeholder { // IE10+
    color: #999;
}
input::-moz-placeholder { // Firefox
    color: #999;
}

兼容

Chrome/Safari/Opera 低版本支持::-webkit-input-placeholder
Edge支持:-ms-input-placeholder

属性选择器、伪类选择器与类选择器优先级一致  0010
伪元素与元素名称选择器优先级一致  0001

CSS3 字体

字体阴影

作用：为文字添加阴影。
语法
- 每个阴影值由元素在X和Y方向的偏移量、模糊半径和颜色值组成，它们之间“空格”隔开
```
text-shadow:0 0 10px red;
 
text-shadow:10px 0 10px red;
  
text-shadow:-10px 0 10px red;
```
  - 水平位置垂直位置模糊值颜色
    - 正值向右向下偏移
    - 负值向左向上偏移
- 添加多个阴影
  - 阴影值之间用逗号隔开
  - 书写顺序越靠前显示越靠上
```
.box:nth-child(4){
     text-shadow:10px 10px  red,20px 20px green,30px 30px pink;
}
```

自定义字体

使用以前 CSS 的版本，网页设计师不得不使用用户计算机上已经安装的字体。

使用 CSS3，网页设计师可以使用的任何字体，只需简单的将字体文件包含在网站中，它会自动下载给需要的用户。

语法

//定义字体
@font-face{
	font-family：“myfont”;
	src:url("字体文件1.woff") format("woff")..
	
}

应用字体：
.box{
	font-family:"myfont";
}

说明：format表示字体格式

兼容

应用：

iconfont 添加至项目的使用

登录iconfont
挑选图标加入购物车
将图标添加至项目
- 还未创建项目需要在此创建项目
进入我的项目——选择fontclass方式，查看在线链接

将文件引入项目

<link href="http://at.alicdn.com/t/font_2474231_62smug0rv6r.css">

挑选类名并应用于页面
```
<i class="iconfont icon-caidan">
```

CSS3 边框

通过 CSS3，能够创建圆角边框，向矩形添加阴影替代之前的切背景图处理

圆角

作用：为元素添加圆角边框
- 圆角半径（水平半径、垂直半径） border-radius:30px/10px;
- border-radius: 左上角右上角右下左下
单个边定义
- 语法： border-*-radius：1-2个空格隔开的值
  - 2个值时分别表示水平半径、垂直半径
- border-top-left-radius 定义了左上角的弧度
- border-top-right-radius 定义了右上角的弧度
- border-bottom-right-radius 定义了右下角的弧度
- border-bottom-left-radius 定义了左下角的弧度
- border-bottom-left-radius 定义了左下角的弧度
- 【先上下后左右】
常用取值
- px
- 百分比
  - 分别相对于宽高计算
- 不允许负值
简写border-radius
- 语法
  - 空格隔开
    - 四个值：左上角、右上角、右下角、左下角水平和垂直半径
    - 三个值：左上角、右上角和左下角，右下角
    - 两个值：左上角与右下角、右上角与左下角
    - 一个值：四个圆角值相同
兼容

阴影

作用：为设置一个或多个阴影
语法
- box-shadow: 阴影水平偏移值垂直偏移模糊值外延值阴影颜色内阴影;
- 空格隔开
取值说明
- none 无阴影
- 第1个长度值用来设置对象的阴影水平偏移值。可以为负值
- 第2个长度值用来设置对象的阴影垂直偏移值。可以为负值
- 第3个长度值用来设置对象的阴影模糊值。不允许负值
- 第4个长度值用来设置对象的阴影外延值。不允许负值
- color 可选。阴影的颜色
- inset：设置对象的阴影类型为内阴影【可以省略不写默认外阴影】
多个阴影
- 用逗号分隔
- 第一个阴影在最上面,书写顺序越靠前，越靠上
兼容

CSS3 背景

概述：CSS3更新增了新的背景属性，提供对元素背景更灵活的控制

多个背景图像

CSS3中可以通过background-image给元素添加多个背景图像

background-image:url("背景图像1.jpg"),url("背景图像2.jpg");

不同的背景图像【逗号】隔开，也可以给不同的图片设置多个不同的属性（如背景位置，背景重复等）

书写顺序越靠前，显示越靠上

单独定义

.box { 
background-image: url(img_flwr.gif), url(paper.gif); 
background-position: right bottom, left top; 
background-repeat: no-repeat, repeat; 
}

简写

.box {
background: url(img_flwr.gif) right bottom no-repeat, url(paper.gif) left top repeat;
}

background-size 背景图像的大小

概述：CSS3以前，背景图像大小由图像的实际大小决定，CSS3中可以指定背景图片，让我们重新在不同的环境中指定背景图片的大小
```
background-size:宽度 高度;
```
取值
- px：用长度值指定背景图像大小。不允许负值。
- 百分比：用百分比指定背景图像大小。不允许负值。
  - 当属性值为百分比时，参照背景图像的background-origin区域大小进行换算
- auto：背景图像的真实大小。
- cover：将背景图像等比缩放到完全覆盖容器，背景图像有可能超出容器。
- contain：将背景图像等比缩放到宽度或高度与容器的宽度或高度相等，背景图像始终被包含在容器内。

例：

 .box{
     width:200px;
     height:200px;
     background:url("pic.jpg") no-repeat;
}

.box:nth-child(1){
	background-size:100px 200px;
}

.box:nth-child(2){
	background-size:100px auto;
}

.box:nth-child(3){
	background-size:50% 50%;
}

.box:nth-child(4){
  background-size:cover;
}

.box:nth-child(5){
  background-size:contain;
}

background-origin背景图像的起始点

作用：指定背景图像的起始点
取值
- padding-box：背景图像的起始点从padding区域开始。（默认值）
- border-box：背景图像的起始点从border区域开始。
- content-box：背景图像的起始点从width,height区域开始。

background-clip背景绘制区域

作用：指定背景绘制区域
取值
- border-box 【默认值】背景绘制至边框盒区域
- padding-box 背景绘制至内边距盒区域
- content-box 背景绘制至内容盒区域

兼容

表格中的数字表示支持该属性的第一个浏览器版本号。

紧跟在 -webkit-, -ms- 或 -moz- 前的数字为支持该前缀属性的第一个浏览器版本号。

CSS3 渐变

CSS3 渐变（gradients）可以让你在两个或多个指定的颜色之间显示平稳的过渡。 CSS3 定义了两种类型的渐变（gradients）通过 background-image指定：线性渐变（Linear Gradients）- 即沿着一根轴线改变颜色，从起点到终点颜色进行顺序渐变。径向渐变（Radial Gradients）- 即以起点为中心，从起点到终点颜色从内到外进行圆形渐变。

线性渐变

linear-gradient() 函数用于创建一个表示两种或多种颜色线性渐变的图片。

创建一个线性渐变，需要指定两种颜色，还可以实现不同方向（指定为一个角度）的渐变效果，如果不指定方向，默认从上到下渐变。

均匀分布的渐变

语法： background:linear-gradient(颜色1,颜色2);

颜色之间逗号隔开

例：
.box:nth-child(1){
   background:linear-gradient(red,blue);
 }

颜色不均匀分布的渐变（自定义颜色节点）

语法： background:linear-gradient(颜色1 节点1,颜色2 节点2);

px
百分比

.box:nth-child(2){
	background:linear-gradient(red 0,red 50px,blue 60px,pink);
}
.box:nth-child(3){
	background:linear-gradient(red 0,red 50%,blue 60%,pink);
}

渐变重复

语法：repeating-linear-gradient( )

.box:nth-child(4){
    background:repeating-linear-gradient(red 0,red 10px,green 10px,green 20px);
 }

渐变方向

使用起始位置关键字
- to right 方向自左向右
- to top 方向自下而上
- to bottom 方向自上而下
- to left 方向自右而左
- to right top 方向朝向右上角
- to left bottom方向朝向左下角

.box{
   background:linear-gradient(to right,red,blue);
}

使用角度

0deg 相当于 to top
90deg 相当于 to right

.box{
    background:linear-gradient(90deg,red,blue);
}

多重渐变

语法：【逗号】隔开

提示：书写顺序越【靠前】显示越【靠上】

 .box{
 background-image:linear-gradient(red,blue),linear-gradient(yellow,pink);
            background-size:50px 50px,100px 100px;
            background-repeat: no-repeat;
            background-position:center center;
 }

径向渐变

radial-gradient()用于创建一个表示两种或多种颜色径向渐变的图片。

径向渐变由中心点定义。

颜色节点均匀分布

语法：background:radial-gradient(颜色1,颜色2);

颜色之间【逗号】隔开

控制颜色节点

语法：radial-gradient(颜色 节点1，颜色 节点2，颜色 节点3...)

节点位置与颜色之间【空格】隔开
节点取值
px
- 百分比

例：
background:radial-gradient(red 0,red 10px,blue 10px,blue 20px);

例：
background:radial-gradient(red 0,red 50%,blue 60%);

渐变重复

语法：repeating-radial-gradient()

例：
background:repeating-radial-gradient(red 0,red 10px,blue 10px,blue 20px);

渐变的形状

ellipse 表示椭圆形[默认值]
circle 表示圆形

语法：background:radial-gradient(形状,颜色1，颜色2)

例：
  background:radial-gradient(ellipse,red,blue);

渐变的圆心

语法：background:radial-gradient(形状 at 水平位置 垂直位置,颜色1，颜色2)

px（表示距左上角的0，0的坐标位置）
百分比
关键字可以是以下词的组合
- left center right
- top center bottom

例：表示圆心在右侧中心
background:radial-gradient(circle at 100% 50%,red,blue);

例：表示圆心在左上角
background:radial-gradient(circle at left top,red,blue);

多重渐变
- 语法：逗号隔开
- 提示：书写顺序越靠前显示越靠上
兼容

表格中的数字表示支持 @media 规则的第一个浏览器的版本号。

紧跟在 -webkit-, -ms- 或 -moz- 前的数字为支持该前缀属性的第一个浏览器版本号。

CSS3 用户界面

resize

作用：规定是否可由用户重置元素的尺寸。
取值
- none 不允许重置元素大小。
- both 允许重置宽度、高度。
- horizontal 允许重置宽度。
- vertical 允许重置高度。
注意
- 需要配合 overflow 属性有效，值可以是 auto、hidden 或 scroll。

box-sizing

作用：规定盒子组成模式
- 标准盒子
- content+border+padding+margin
- 怪异盒子(IE8)
- content(padding，border)+margin
取值
- content-box：定义宽高【不包括】内边距和边框【标准盒模型】
  - 盒子的总大小 = width/height +padding+border + margin
- border-box：定义宽高【包括】内边距和边框【怪异盒模型】
  - 盒子的总大小 = width/height + margin

兼容性：

标签：CSS3,box,伪类,gradient,渐变,background,选择器,red
来源： https://blog.csdn.net/qq_48469083/article/details/119221274

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

关于状态伪类选择器、CSS3字体、CSS3边框、CSS3背景、CSS3渐变、CSS3用户界面

状态伪类选择器

伪元素选择器

CSS3 字体

CSS3 边框

阴影

CSS3 背景

background-size 背景图像的大小

background-origin背景图像的起始点

background-clip背景绘制区域

兼容

CSS3 渐变

线性渐变

均匀分布的渐变

颜色不均匀分布的渐变（自定义颜色节点）

渐变重复

渐变方向

多重渐变

径向渐变

CSS3 用户界面