大橙子网站建设,新征程启航
为企业提供网站建设、域名注册、服务器等服务
今天小编给大家分享一下css3选择器,边框,圆角,背景和渐变的方法的相关知识点,内容详细,逻辑清晰,相信大部分人都还太了解这方面的知识,所以分享这篇文章给大家参考一下,希望大家阅读完这篇文章后有所收获,下面我们一起来了解一下吧。
三沙网站制作公司哪家好,找创新互联建站!从网页设计、网站建设、微信开发、APP开发、成都响应式网站建设公司等网站项目制作,到程序开发,运营维护。创新互联建站成立与2013年到现在10年的时间,我们拥有了丰富的建站经验和运维经验,来保证我们的工作的顺利进行。专注于网站建设就选创新互联建站。
Css3选择器相关:
section > div直接子元素选择器
div + article相邻兄弟选择器(在元素之后出现)
div ~ article通用兄弟选择器(在元素之后出现)
属性选择器:
a[href] { text-decoration: none; } a[href="#"] { color: #f00; } /*包含two且属性值用空格分隔:*/ a[class~="two"] { color: #ff0; } /*属性的第一个值以#开头:*/ a[href^="#"] { color: #0f0; } /*以#结尾:*/ a[href$="#"] { color: #00f; } /*包含#:*/ a[href*="#"] { color: #0ff; } /*第一个属性值以#-开头:*/ a[href|="#"] { color: #f0f; }
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兼容性写法:
-webkit-border-radius: 50%; -moz-border-radius: 50%; -ms-border-radius: 50%; -o-border-radius: 50%; border-radius: 50%;
box-shadow水平偏移 垂直偏移 模糊 扩展 颜色 内部
box-shadow: 50px 30px 0px 0px yellow inset;
border-image-repeat:stretch(拉伸)/repeat(重复)/round(铺满)/initial/inherit
border-image-source: url("border.jpg"); border-image-slice: 50%;/*图像边界向内偏移*/ border-image-width: 50%;/*图像边界的宽度*/ border-image-outset: 2; /*在边框外部绘制*/ border-image-repeat: repeat;
css3背景与渐变:
背景绘制区域(显示范围)
background-clip: border-box; background-clip: padding-box; background-clip: content-box;
背景图像定位(起始位置,原点位置,与偏移搭配使用)
background-origin: border-box; background-origin: padding-box; background-origin: content-box; background-position:10px 10px; /*与偏移搭配使用*/
background-size只写一个值,第二个默认是auto,根据比例等比缩放
background-size: contain; /*等比缩放到某一边达到容器边缘*/ background-size: cover;/*等比缩放填满容器*/ background-size: 800px 500px; background-size: 800px; background-size: 50% 50%; background-size: 50%; background-size: 100% 100%; background-size: 100%;
background-image多重背景,前面的会覆盖后面的
background-image: url('bg2.png'), url('bg1.jpg');
demo:
background-image
默认从上到下渐变:
div { width: 800px; height: 500px; background: -webkit-linear-gradient(red, blue); background: -moz-linear-gradient(red, blue); background: -o-linear-gradient(red, blue); background: linear-gradient(red, blue); }
从左到右渐变
div { width: 800px; height: 500px; background: -webkit-linear-gradient(left, red , blue); background: -moz-linear-gradient(right, red, blue); background: -o-linear-gradient(right, red, blue); background: linear-gradient(to right, red , blue); }
左上角开始的对角线渐变
div { width: 800px; height: 500px; background: -webkit-linear-gradient( left top, red, yellow, blue); background: -moz-linear-gradient( right bottom, red, yellow, blue); background: -o-linear-gradient( right bottom, red, yellow, blue); background: linear-gradient(to right bottom, red, yellow, blue); }
角度控制方向
角度渐变是水平线和渐变线之间的角度,0deg是从下到上,90度是从左到右
div { width: 800px; height: 500px; background: -webkit-linear-gradient(135deg, red, yellow, blue); background: -moz-linear-gradient(135deg, red, yellow, blue); background: -o-linear-gradient(135deg, red, yellow, blue); background: linear-gradient(135deg, red, yellow, blue); }
渐变具体位置控制
div { width: 800px; height: 500px; background: -webkit-linear-gradient(90deg, red 10%, orange 15%, yellow 20%, green 50%, blue 70%, indigo 80%, violet 100%); background: -moz-linear-gradient(90deg, red 10%, orange 15%, yellow 20%, green 50%, blue 70%, indigo 80%, violet 100%); background: -o-linear-gradient(90deg, red 10%, orange 15%, yellow 20%, green 50%, blue 70%, indigo 80%, violet 100%); background: linear-gradient(90deg, red 10%, orange 15%, yellow 20%, green 50%, blue 70%, indigo 80%, violet 100%); }
透明色渐变
div { width: 800px; height: 500px; background: -webkit-linear-gradient(90deg, rgba(255, 0, 0, 0), rgba(255, 0, 0, 1)); background: -moz-linear-gradient(90deg, rgba(255, 0, 0, 0), rgba(255, 0, 0, 1)); background: -o-linear-gradient(90deg, rgba(255, 0, 0, 0), rgba(255, 0, 0, 1)); background: linear-gradient(90deg, rgba(255, 0, 0, 0), rgba(255, 0, 0, 1)); }
重复渐变
div { width: 800px; height: 500px; background: -webkit-repeating-linear-gradient(90deg, red 0%, blue 10%, red 20%); background: -moz-repeating-linear-gradient(90deg, red 0%, blue 10%, red 20%); background: -o-repeating-linear-gradient(90deg, red 0%, blue 10%, red 20%); background: repeating-linear-gradient(90deg, red 0%, blue 10%, red 20%); }
径向渐变,从内到外
div { width: 800px; height: 500px; background: -webkit-radial-gradient(red, blue); background: -moz-radial-gradient(red, blue); background: -o-radial-gradient(red, blue); background: radial-gradient(red, blue); }
圆形渐变
div { width: 800px; height: 500px; background: -webkit-radial-gradient(circle, red, blue); background: -moz-radial-gradient(circle, red, blue); background: -o-radial-gradient(circle, red, blue); background: radial-gradient(circle, red, blue); }
椭圆形渐变
div { width: 800px; height: 500px; background: -webkit-radial-gradient(ellipse, red, blue); background: -moz-radial-gradient(ellipse, red, blue); background: -o-radial-gradient(ellipse, red, blue); background: radial-gradient(ellipse, red, blue); }
渐变从圆心到最近边
div.closest-side { width: 300px; height: 200px; margin: 50px; background: -webkit-radial-gradient(30% 70%, circle closest-side, red, blue); background: -moz-radial-gradient(30% 70%, circle closest-side, red, blue); background: -o-radial-gradient(30% 70%, circle closest-side, red, blue); background: radial-gradient(30% 70%, circle closest-side, red, blue); }
渐变从圆心到最远边
div.farthest-side { width: 300px; height: 200px; margin: 50px; background: -webkit-radial-gradient(30% 70%, farthest-side, red, blue); background: -moz-radial-gradient(30% 70%, farthest-side, red, blue); background: -o-radial-gradient(30% 70%, farthest-side, red, blue); background: radial-gradient(30% 70%, farthest-side, red, blue); }
渐变从圆心到最近角
div.closest-corner { width: 300px; height: 200px; margin: 50px; background: -webkit-radial-gradient(30% 70%, closest-corner, red, blue); background: -moz-radial-gradient(30% 70%, closest-corner, red, blue); background: -o-radial-gradient(30% 70%, closest-corner, red, blue); background: radial-gradient(30% 70%, closest-corner, red, blue); }
渐变从圆心到最远角
div.farthest-corner { width: 300px; height: 200px; margin: 50px; background: -webkit-radial-gradient(30% 70%, farthest-corner, red, blue); background: -moz-radial-gradient(30% 70%, farthest-corner, red, blue); background: -o-radial-gradient(30% 70%, farthest-corner, red, blue); background: radial-gradient(30% 70%, farthest-corner, red, blue); }
IE渐变从上到下
div { width: 800px; height: 500px; filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ff0000', endColorstr='#0000ff',GradientType=0 ); }
IE渐变从左到右
div { width: 800px; height: 500px; filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ff0000', endColorstr='#0000ff',GradientType=1 ); }
Demo:
线性渐变 - 特殊案例
以上就是“css3选择器,边框,圆角,背景和渐变的方法”这篇文章的所有内容,感谢各位的阅读!相信大家阅读完这篇文章都有很大的收获,小编每天都会为大家更新不同的知识,如果还想学习更多的知识,请关注创新互联行业资讯频道。