CSS3

2022-08-24 21:56:42

1.css3属性选择器

　　　　　/* 所有包含class属性的 */
        [class] {
            width: 100px;
            height: 100px;
            background-color: red;
        }

        /* 所有class属性为box的 */
        [class=‘box‘] {
            height: 200px;
        }

        /*id以O开头的  */
        [id^=‘O‘] {
            width: 100px;
            height: 100px;
            background-color: cyan;
        }

        /* a标签里href属性以.cn/结尾的 */
        a[href$=‘.cn/‘] {
            background-color: grey;
        }

        /* 所有href属性里包含w的 */
        [href*=‘w‘] {
            color: magenta;
        }

2.CSS3伪类选择器

:nth-child()

/* 需求：让3改变背景色 */
        /* 如果父元素下第三个不是li标签，就不发生变化 */
        /* ul li:nth-child(3){
            background: red;
        } */

:nth-last-child()

 /* 从父元素最后一个子元素开始计算，倒数第三个如果不是li标签，就不变化 */
        /* ul li:nth-last-child(3) {
            background: red;
        } */

:nth-of-type()

 /* 父元素下第三个li标签改变背景色 */
        ul li:nth-of-type(3) {
            background: red;
        }

:nth-last-of-type()

  /* 从父元素最后一个子元素开始计算，倒数第三个li标签 */
        ul li:nth-last-of-type(3) {
            background: red;
        }

:first-child

 /* 父元素下第一个子元素，如果不是li标签，就不发生改变 */
        li:first-child {
            background: pink;
        }

li:last-child

  li:last-child {
            background: pink;
        }

3、CSS3伪元素选择器

是一个行内元素，需要转换成块:display:block float:** position:。

必须添加content,哪怕不设置内容，也需要content:””。

:first-letter	p:first-letter	选择每一个<P>元素的第一个字母或者第一个汉字	1
:first-line	p:first-line	选择每一个<P>元素的第一行	1
			2
:before	p:before	在每个<p>元素之前插入内容	2
:after	p:after	在每个<p>元素之后插入内容

4、颜色设置

1.16进制

p{
background-color:#ff0000;
}

2、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);
}

6、文本效果

1、CSS3 文本阴影

了水平阴影，垂直阴影，模糊的距离，以及阴影的颜色

text-shadow: 5px 5px 5px #FF0000;

2、CSS3文本溢出

white-space: nowrap; 强制文字同一行显示

overflow: hidden;　　　溢出部分隐藏

text-overflow: ellipsis;　　溢出部分用省略号

三个必须一起使用

 {
            width: 40px;
            height: 60px;
            border: 4px dashed blue;
            /* 强制同一行显示 */
            white-space: nowrap;
            /* 溢出部分隐藏 */
            overflow: hidden;
            /* 溢出部分显示省略号 */
            text-overflow: ellipsis;
        }

7、CSS3边框

(1)、CSS3 圆角

在div中添加圆角元素

div{
border:2px solid;
border-radius:25px;

}

(2)、CSS3 盒阴影

在div中添加box-shadow属性

div{
box-shadow: 10px 10px 5px #888888;

}

(3)、CSS3 边界图片

div{
   border: 30px solid blue;
border-image:url(border.png) 30 30 round;
-webkit-border-image:url(border.png) 30 30 round; /* Safari 5 and older */
-o-border-image:url(border.png) 30 30 round; /* Opera浏览器兼容 */
}

8.CSS3框

(1) 、CSS3 box-sizing 属性

box-sizing 属性允许你以某种方式定义某些元素，以适应指定区域。

例如，假如您需要并排放置两个带边框的框，可通过将 box-sizing 设置为 "border-box"。这可令浏览器呈现出带有指定宽度和高度的框，并把边框和内边距放入框中。

box-sizing: content-box|border-box|inherit:

值	说明
content-box	这是 CSS2.1 指定的宽度和高度的行为。指定元素的宽度和高度（最小/最大属性）适用于box的宽度和高度。元素的填充和边框布局和绘制指定宽度和高度除外
border-box	指定宽度和高度（最小/最大属性）确定元素边框。也就是说，对元素指定宽度和高度包括了 padding 和 border 。通过从已设定的宽度和高度分别减去边框和内边距才能得到内容的宽度和高度。
inherit	指定 box-sizing 属性的值，应该从父元素继承

(2) 、CSS3 box-sizing 属性浏览器支持

属性

谷歌

火狐

safri

欧朋

box-sizing

10.0
4.0 -webkit-

8.0

-ms-

29.0
2.0 -moz-

5.1
3.2 -webkit-

9.5

-o-

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

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

演示示例：CSS3box-sizing属性

(3) 、CSS3 调整尺寸

CSS3中，resize属性指定一个元素是否应该由用户去调整大小。

这个 div 元素由用户调整大小。 (在 Firefox 4+, Chrome, 和 Safari中)

div { 

border:2px solid;

padding:10px 40px;

width:300px;

resize:both;

overflow:auto;

}

9.CSS3按钮

1、按钮颜色

　　使用 background-color 属性来设置按钮颜色

2、按钮大小

　　使用 font-size属性来设置按钮大小

3、圆角按钮

　　使用 border-radius 属性来设置圆角按钮

4、按钮边框颜色

　　使用 border 属性设置按钮边框颜色

5、鼠标悬停按钮

　　使用 :hover 选择器来修改鼠标悬停在按钮上的样式。

6、按钮阴影

　　使用 box-shadow 属性来为按钮添加阴影

7、按钮禁用

　　使用cursor 属性并设置为 "not-allowed" 来设置按钮禁用

8、按钮宽度

　　使用 width 属性来设置按钮的宽度，如果要设置固定宽度可以使用像素 (px) 为单位，如果要设置响应式的按钮可以设置为百分比。