css3选择器,边框,圆角,背景和渐变的方法

今天小编给大家分享一下css3选择器,边框,圆角,背景和渐变的方法的相关知识点，内容详细，逻辑清晰，相信大部分人都还太了解这方面的知识，所以分享这篇文章给大家参考一下，希望大家阅读完这篇文章后有所收获，下面我们一起来了解一下吧。
Css3选择器相关：
section > div直接子元素选择器
div + article相邻兄弟选择器（在元素之后出现）
div ~ article通用兄弟选择器（在元素之后出现）
属性选择器：
UI元素伪类：
Input:disabled
Input:enabled
Input:checked
div:first-child匹配属于其父元素的第1个子元素且是div，计数时不分类型，显示时分类型
div:last-child匹配属于其父元素的最后1个子元素且是div，计数时不分类型，显示时分类型div:nth-child(2) 匹配属于其父元素的第n个子元素且是div，计数时不分类型，显示时分类型div:nth-lat-child(2) 匹配属于其父元素的第n个子元素且是div，计数时不分类型，显示时分类型
n匹配下标，从0开始计算：
li:nth-child(2n) 双数
li:nth-child(2n+1) 单数
li:nth-child(n+4)
li:nth-child(odd) 奇数，下标从1开始计算
li:nth-child(even) 偶数，下标从1开始计算
li:nth-last-child(3) 倒数第3个
article:only-child 属于父元素的唯一元素，且是article(没有任何其他子元素)
div:nth-of-type(2) 匹配属于其父元素的第2个子元素且是div，计数时分类型
div:nth-last-of-type(2)
div:first-of-type div:last-of-type
article:only-of-type 属于父元素的唯一article元素（可以有其他类型的子元素）
div:empty 没有子元素的div元素（包括文本也没有）
a:not(:last-of-type) 不是最后一个a子元素
id选择器权重大于属性选择器
.red > [class=”red”]
Css伪元素：
div::selection 文本被选中后的样式
::-moz-selection 火狐
Css3边框与圆角：
四个值按照顺时针方向来
Border-radius兼容性写法：
box-shadow水平偏移 垂直偏移 模糊 扩展 颜色 内部
border-image-repeat:stretch（拉伸）/repeat（重复）/round（铺满）/initial/inherit
css3背景与渐变：
背景绘制区域（显示范围）
背景图像定位（起始位置，原点位置，与偏移搭配使用）
background-size只写一个值，第二个默认是auto，根据比例等比缩放
background-image多重背景，前面的会覆盖后面的
demo：
默认从上到下渐变：
从左到右渐变
左上角开始的对角线渐变
角度控制方向
角度渐变是水平线和渐变线之间的角度，0deg是从下到上，90度是从左到右
渐变具体位置控制
透明色渐变
重复渐变
径向渐变，从内到外
圆形渐变
椭圆形渐变
渐变从圆心到最近边
渐变从圆心到最远边
渐变从圆心到最近角
渐变从圆心到最远角
IE渐变从上到下
IE渐变从左到右
Demo：以上就是“css3选择器,边框,圆角免费云主机、域名,背景和渐变的方法”这篇文章的所有内容，感谢各位的阅读！相信大家阅读完这篇文章都有很大的收获，小编每天都会为大家更新不同的知识，如果还想学习更多的知识，请关注云技术行业资讯频道。

相关推荐: HTML5中怎么用Canvas绘制圆点虚线

本篇内容主要讲解“HTML5中怎么用Canvas绘制圆点虚线”，感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷，实用性强。下面就让小编来带大家学习“HTML5中怎么用Canvas绘制圆点虚线”吧! 代码如下: var canvas免费云主机、域名Proto…