CSS3选择器、边框、背景、按钮

1.CSS3概述
(1)、CSS3简介
如同人类的的进化一样，CSS3是CSS2的“进化”版本，在CSS2基础上，增强
或新增了许多特性，弥补了CSS2的众多不足之处，使得Web开发变得更为高效和
便捷动画圆角阴影边框图片…
(2)、CSS3现状
1、浏览器支持程度差，需要添加私有前缀
-webkit-谷歌safari
-moz-火狐
-ms-IE
2、移动端支持优于PC端
3、不断改进中
4、应用相对广泛
2.CSS3选择器
CSS3新增了许多灵活查找元素的方法，极大的提高了查找元素的效率和精准
度。CSS3选择器与jQuery中所提供的绝大部分选择器兼容
(1)、CSS3属性选择器
[attribute][target]选择所有带有target属性元素
[attribute=value][target=-blank]选择所有使用target="-blank"的元素
[attribute~=value][title~=flower]选择标题属性包含单词"flower"的所有元素
[attribute|=language][lang|=en]选择lang属性以en-为开头的所有元素（注意有关个-）
[attribute^=value]a[src^="https"]选择每一个src属性的值以"https"开头的元素
[attribute$=value]a[src$=".pdf"]选择每一个src属性的值以".pdf"结尾的元素
[attribute*=value]a[src*="runoob"选择每一个src属性的值包含子字符串"runoob"的元素
]
(2)、CSS3伪类选择器
:nth-child(n)p:nth-child(2)选择每个p元素是其父级的第二个子元素
:nth-last-child(n)p:nth-last-child(2)选择每个p元素的是其父级的第二个子元素，从最后一个子项计数
:nth-of-type(n)p:nth-of-type(2)选择每个p元素是其父级的第二个p元素
:nth-last-of-type(n)p:nth-last-of-type(2)选择每个p元素的是其父级的第二个p元素，从最后一个子项计数
:last-childp:last-child指定只有选择每个p元素是其父级的最后一个子级。
:first-childp:first-child指定只有当元素是其父级的第一个子级的样式
演示示例：CSS3伪类选择器
(3)、CSS3伪元素选择器
是一个行内元素，需要转换成块:display:blockfloat:**position:。
必须添加content,哪怕不设置内容，也需要content:””。
::first-letterp::first-letter选择每一个元素的第一个字母或者第一个汉字
::first-linep::first-line选择每一个元素的第一行
::beforep::before在每个元素之前插入内容
::afterp::after在每个元素之后插入内容
3.CSS3颜色
(1)、十六进制颜色
所有主要浏览器都支持十六进制颜色值。
指定一个十六进制的颜色其组成部分是：＃RRGGBB，其中RR（红色），GG（绿
色）和BB（蓝色）。所有值必须介于0和FF之间。
p{
background-color:#ff0000;
}
演示示例：十六进制颜色
(2)、RGB颜色
RGB颜色值在所有主要浏览器都支持。
RGB颜色值指定：RGB（红，绿，蓝）。每个参数（红色，绿色和蓝色）定义
颜色的亮度，可在0和255之间，或一个百分比值（从0％到100％）之间的整数。
p{
background-color:rgb(255,0,0);
}
(3)、RGBA颜色
RGBA颜色值被IE9,Firefox3+,Chrome,Safari,和Opera10+支持。
RGBA颜色值是RGB颜色值alpha通道的延伸-指定对象的透明度。
RGBA颜色值指定：RGBA（红，绿，蓝，alpha）。Alpha参数是一个介于0.0
（完全透明）和1.0（完全不透明）之间的参数
p{
background-color:rgba(255,0,0,0.5);
(4)、HSL颜色
IE9,Firefox,Chrome,Safari,和Opera10+.支持HSL颜色值。
HSL代表色相，饱和度和亮度-使用色彩圆柱坐标表示。
HSL颜色值指定：HSL（色调，饱和度，明度）。
色相是在色轮上的程度（从0到360）-0（或360）是红色的，120是绿色的，
240是蓝色的。饱和度是一个百分比值;0％意味着灰色。100％的阴影是全彩。亮
度也是一个百分点;0％是黑色的，100％是白色的。
p{
background-color:hsl(120,65%,75%);
(5)、HSLA颜色
HSLA颜色值被IE9,Firefox3+,Chrome,Safari,和Opera10+.支持.
HSLA的颜色值是一个带有alpha通道的HSL颜色值的延伸-指定对象的透明
度。
指定HSLA颜色值：HSLA（色调，饱和度，亮度，α），α是Alpha参数定义的
不透明度。Alpha参数是一个介于0.0（完全透明）和1.0（完全不透明）之间的参
数。
p{
background-color:hsla(120,65%,75%,0.3);

4.CSS3文本效果
(1)、CSS3文本阴影
您指定了水平阴影，垂直阴影，模糊的距离，以及阴影的颜色：:

h1{
text-shadow:5px5px5px#FF0000;}
CSS3文本溢出属性指定应向用户如何显示溢出内容
p.test1{
//文本不换行
white-space:nowrap;
width:200px;
border:1pxsolid#000000;
//多余的部分隐藏掉
overflow:hidden;
//修剪文本。
text-overflow:clip;
}
p.test2{
white-space:nowrap;
width:200px;
border:1pxsolid#000000;
overflow:hidden;
//显示省略号来代表被修剪的文本
text-overflow:ellipsis;
}

5.CSS3边框
(1)、CSS3圆角
在div中添加圆角元素
div{
border:2pxsolid;
border-radius:25px;
}
(2)、CSS3盒阴影
在div中添加box-shadow属性
div{
box-shadow:10px10px5px#888888;
}
(3)、CSS3边界图片
border-image属性允许你指定一个图片作为边框！用于创建上文边框的原始
图像，在div中使用图片创建边框:
div{
border:30pxsolidblue;
border-image:url(border.png)3030round;
-webkit-border-image:url(border.png)3030round;/*Safari5andolder
*/
-o-border-image:url(border.png)3030round;/*Opera*/
}
(4)、CSS3实现三角形
三角形实现原理：宽度width为0；height为0；（1）有一条横竖边（上下左
右）的设置为border-方向：长度solidred，这个画的就是底部的直线。其他边使用
border-方向：长度solidtransparent。（2）有两个横竖边（上下左右）的设置，若
斜边是在三角形的右边，这时候设置top或bottom的直线，和右边的斜线。若斜
边是在三角形的左边，这时候设置top或bottom的直线，和左边的斜线。

#triangle-up{
width:0;
height:0;
border-left:50pxsolidtransparent;
border-right:50pxsolidtransparent;
border-bottom:100pxsolidred;
}
#triangle-down{
width:0;
height:0;
border-left:50pxsolidtransparent;
border-right:50pxsolidtransparent;
border-top:100pxsolidred;
}
#triangle-left{
width:0;
height:0;
border-top:50pxsolidtransparent;
border-right:100pxsolidred;
border-bottom:50pxsolidtransparent;
}
#triangle-right{
width:0;
height:0;
border-top:50pxsolidtransparent;
border-left:100pxsolidred;
border-bottom:50pxsolidtransparent;
}
#triangle-topleft{
width:0;
height:0;
border-top:100pxsolidred;
border-right:100pxsolidtransparent;
}
#triangle-topright{
width:0;
height:0;
border-top:100pxsolidred;
border-left:100pxsolidtransparent;
}
#triangle-bottomleft{
width:0;
height:0;
border-bottom:100pxsolidred;
border-right:100pxsolidtransparent;
}
#triangle-bottomright{
width:0;
height:0;
border-bottom:100pxsolidred;
border-left:100pxsolidtransparent;
}

6.CSS3框大小
(1)、CSS3box-sizing属性
box-sizing属性允许你以某种方式定义某些元素，以适应指定区域。
例如，假如您需要并排放置两个带边框的框，可通过将box-sizing设置为
"border-box"。这可令浏览器呈现出带有指定宽度和高度的框，并把边框和内边距放
入框中。
box-sizing:content-box|border-box|inherit:

(3)、CSS3调整尺寸
CSS3中，resize属性指定一个元素是否应该由用户去调整大小。
这个div元素由用户调整大小。(在Firefox4+,Chrome,和Safari中)

div{
border:2pxsolid;
padding:10px40px;
width:300px;
resize:both;
overflow:auto;
}

7.CSS3按钮
(1)、基本按钮样式
我们可以通过button标签来设置按钮
CSS实例

.button{
background-color:#4CAF50;/*Green*/
border:none;
color:white;
padding:15px32px;
text-align:center;
text-decoration:none;
display:inline-block;
font-size:16px;
}

(2)、按钮颜色
我们可以使用background-color属性来设置按钮颜色
.button1{background-color:#4CAF50;}/*Green*/
.button2{background-color:#008CBA;}/*Blue*/
(3)、按钮大小
我们可以使用font-size属性来设置按钮大小
.button1{font-size:10px;}
.button2{font-size:12px;}
.button3{font-size:16px;}
.button4{font-size:20px;}
.button5{font-size:24px;}
(4)、圆角按钮
我们可以使用border-radius属性来设置圆角按钮
.button1{border-radius:2px;}
.button2{border-radius:4px;}
.button3{border-radius:8px;}
.button4{border-radius:12px;}
.button5{border-radius:50%;}
(5)、按钮边框颜色
我们可以使用border属性设置按钮边框颜色
.button1{
background-color:white;
color:black;
border:2pxsolid#4CAF50;/*Green*/
}
(6)、鼠标悬停按钮
我们可以使用:hover选择器来修改鼠标悬停在按钮上的样式。
提示:我们可以使用transition-duration属性来设置"hover"效果的速度:
.button{
-webkit-transition-duration:0.4s;/*Safari*/
transition-duration:0.4s;
}
.button:hover{
background-color:#4CAF50;/*Green*/
color:white;
}
...
(7)、按钮阴影
我们可以使用box-shadow属性来为按钮添加阴影
.button1{
box-shadow:08px16px0rgba(0,0,0,0.2),06px20px0rgba(0,0,0,0.19);
}
.button2:hover{
box-shadow:012px16px0rgba(0,0,0,0.24),017px50px0rgba(0,0,0,0.19);
}
(8)、禁用按钮
我们可以使用opacity属性为按钮添加透明度(看起来类似"disabled"属性效
果)。
提示:我们可以添加cursor属性并设置为"not-allowed"来设置一个禁用的图
片:
.disabled{
opacity:0.6;
cursor:not-allowed;
}
(9)、按钮宽度
默认情况下，按钮的大小有按钮上的文本内容决定(根据文本内容匹配长度)。
我们可以使用width属性来设置按钮的宽度:
提示:如果要设置固定宽度可以使用像素(px)为单位，如果要设置响应式的按
钮可以设置为百分比。
.button1{width:250px;}
.button2{width:50%;}
.button3{width:100%;}
(10)、按钮动画
鼠标移动到按钮上后添加箭头标记
.button{
display:inline-block;
border-radius:4px;
background-color:#f4511e;
border:none;
color:#FFFFFF;
text-align:center;
font-size:28px;
padding:20px;
width:200px;
transition:all0.5s;
cursor:pointer;
margin:5px;
}
.buttonspan{
cursor:pointer;
display:inline-block;
position:relative;
transition:0.5s;
}
.buttonspan:after{
content:'»';
position:absolute;
opacity:0;
top:0;
right:-20px;
transition:0.5s;
}
.button:hoverspan{
padding-right:25px;
}
.button:hoverspan:after{
opacity:1;
right:0;
}点击时添加"波纹"效果
.button{
position:relative;
background-color:#4CAF50;
border:none;
font-size:28px;
color:#FFFFFF;
padding:20px;
width:200px;
text-align:center;
-webkit-transition-duration:0.4s;/*Safari*/
transition-duration:0.4s;
text-decoration:none;
overflow:hidden;
cursor:pointer;
}
.button:after{
content:"";
background:#90EE90;
display:block;
position:absolute;
padding-top:300%;
padding-left:350%;
margin-left:-20px!important;
margin-top:-120%;
opacity:0;
transition:all0.8s
}
.button:active:after{
padding:0;
margin:0;
opacity:1;
transition:0s
}
点击时添加"压下"效果
.button{
display:inline-block;
padding:15px25px;
font-size:24px;
cursor:pointer;
text-align:center;
text-decoration:none;
outline:none;
color:#fff;
background-color:#4CAF50;
border:none;
border-radius:15px;
box-shadow:09px#999;
}
.button:hover{background-color:#3e8e41}
.button:active{
background-color:#3e8e41;
box-shadow:05px#666;
transform:translateY(4px);
}
8.CSS3背景
CSS3中包含几个新的背景属性，提供更大背景元素控制。
在本章您将了解以下背景属性：
background-image
background-size
background-origin
background-clip
(5)、background-image属性
CSS3中可以通过background-image属性添加背景图片。
不同的背景图像和图像用逗号隔开，所有的图片中显示在最顶端的为第一张。
#example1{
background-image:url(img_flwr.gif),url(paper.gif);
background-position:rightbottom,lefttop;
background-repeat:no-repeat,repeat;
}
可以给不同的图片设置多个不同的属性
#example1{
background:url(img_flwr.gif)rightbottomno-repeat,url
(paper.gif)lefttoprepeat;
}
(6)、background-size属性
background-size指定背景图像的大小。CSS3以前，背景图像大小由图像的实际
大小决定。
CSS3中可以指定背景图片，让我们重新在不同的环境中指定背景图片的大小。
您可以指定像素或百分比大小。
你指定的大小是相对于父元素的宽度和高度的百分比的大小。
div{background:url(img_flwr.gif);
background-size:100%100%;
background-repeat:no-repeat;
}

(7)、background-Origin属性
background-Origin属性指定了背景图像的位置区域。
content-box,padding-box,和border-box区域内可以放置背景图像。
div{
background:url(img_flwr.gif);
background-repeat:no-repeat;
background-size:100%100%;background-origin:content-box;
}
(8)、background-clip属性
CSS3中background-clip背景剪裁属性是从指定位置开始绘制。
#example1{
border:10pxdottedblack;
padding:35px;
background:yellow;background-clip:content-box;
}

CSS3选择器、边框、背景、按钮相关推荐

css3选择器、背景、边框、渐变、阴影以及文本效果的介绍及实现
HTML代码: <!DOCTYPE html> <html lang="en"> <head><meta charset="UT ...
CSS3 渐变边框，按钮样式、设计图标、电子优惠券详解！
1.定义渐变边框实例设计: 本例使用 backgroun-imag 属性提供渐变边框,定义渐变边框,效果如下: 代码: 2.定义渐变填充色本例通过 conten 属性为 div class=wy ...
08.CSS3选择器、边框、背景、按钮
CSS3概述 CSS3简介如同人类的的进化一样,CSS3是CSS2的"进化"版本,在CSS2基础上,增强或新增了许多特性, 弥补了CSS2的众多不足之处,使得Web开发变得更为高 ...
css3 下边框缓缓划过_一篇文章带你了解CSS3按钮知识
在实际开发中,按钮的应用是必不可少.使用 CSS 来制作按钮,可以更有新意,更有趣,也可以自定义自己想要的样式. 一.平面样式CSS按钮平面样式按钮的使用现在非常流行,并且符合无处不在的平面设计趋势 ...
CSS3 基本属性浅析（含选择器、背景阴影、3D转换、动画等）
1渐进增强原则 2私有前缀不同浏览器在发布不同版本(一般测试版)时会加前缀,新增属性加上前缀进行支持测试: Chrome浏览器:-webkit-border-radius: 5px; ...
HTML5+CSS3-边框背景图、多背景图、CSS选择器、网络字体、边框背景图片、过渡、放大、旋转
边框背景图片 1. background-origin:设置背景图片的起始原点 background-origin:border-box;------背景图片从边框开始显示 background-o ...
css3 渐变背景圆形,CSS 教程（5）-Css3-1,边框,背景,渐变,
1.CSS3 边框用 CSS3,你可以创建圆角边框,添加阴影框,并作为边界的形象而不使用设计程序,如 Photoshop 在 CSS3 中 border-radius 属性被用于创建圆角 div { ...
视频教程-CSS3网页设计与制作(6-11)：颜色特性/新型盒模型/边框/背景/渐变-HTML5/CSS
CSS3网页设计与制作(6-11):颜色特性/新型盒模型/边框/背景/渐变知识传播美丽,分享传递快乐.作者主要从事Java服务器端技术.前端与移动开发技术的研究和授课,已有10多年从业经验. IT老 ...
CSS3 选择器——笔记+实战案例(基本选择器、组合选择器、属性选择器、伪类选择器)...
使用CSS3 选择器--笔记 CSS通过选择器控制HTML元素,CSS选择器对网页对象可以实现一对一.一对多或者多对一的匹配. 一.CSS3选择器分类 CSS选择器在CSS2.1选择器的基础上新增了属 ...

CSS3选择器、边框、背景、按钮

CSS3选择器、边框、背景、按钮相关推荐

最新文章

热门文章