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

Bub_ble___

已于 2023-04-08 21:56:38 修改

阅读量133

点赞数

分类专栏： HTML css 文章标签： css3 前端 javascript

于 2023-04-08 18:12:04 首次发布

本文链接：https://blog.csdn.net/Bub_ble___/article/details/130032073

版权

HTML 同时被 2 个专栏收录

10 篇文章 0 订阅

订阅专栏

css

4 篇文章 0 订阅

订阅专栏

一、CSS3现状

1、浏览器支持程度差，需要添加私有前缀

-webkit- 谷歌 safari

-moz- 火狐

-ms- IE

-o- 欧朋

2、移动端支持优于PC端

3、不断改进中

4、应用相对广泛

二、CSS3选择器

1.CSS3属性选择器

[attribute]	[target]	选择所有带有target属性元素	2
[attribute=value]	[target=-blank]	选择所有使用target="-blank"的元素	2
[attribute~=value]	~~[title~=flower]~~	~~选择标题属性包含单词"flower"的所有元素~~~~(前后无内容算单词)~~	2
[attribute\|=language]	[lang\|=en]	选择 lang 属性以 en- 为开头的所有元素（注意有关个-）
[attribute^=value]	[src^="https"]	选择每一个src属性的值以"https"开头的元素	3
[attribute$=value]	[src$=".pdf"]	选择每一个src属性的值以".pdf"结尾的元素	3
[attribute*=value]	[src*="runoob"]	选择每一个src属性的值包含子字符串"runoob"的元素

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        *{
            padding: 0;
            margin: 0;
        }
        /* [target]{
            color: red;
        } */
        /* [target=_blank]{
            color: red;
        } */
        /* [target$="k"]{
            color: chartreuse;
        } */
        /* [title$="2"]{
            color: crimson;
        } */
        [title*="212"]{
            color: red;
        }
    </style>
</head>
<body>
    <a href="#" target="_blank" title="121212">11111111111</a>
    <a href="#" target="_blank">111111111111</a>
    <a href="#" target="_blank">111111111111</a>
    <a href="#" target="_blank">11111111111111</a>
    <a href="#" target="_self">6666666666</a>
    <a href="#" target="_self">6666666666</a>
    <a href="#" target="_self">666666666</a>
    <a href="#">88888</a>
    <a href="#">88888</a>
    <a href="#">88888</a>
</body>
</html>

2.CSS3伪类选择器

:nth-child(n)	p:nth-child(2)	选择每个p元素是其父级的第二个子元素	3
:nth-last-child(n)	p:nth-last-child(2)	选择每个p元素的是其父级的第二个子元素，从最后一个子项计数	3
:nth-of-type(n)	p:nth-of-type(2)	选择每个p元素是其父级的第二个p元素	3
:nth-last-of-type(n)	p:nth-last-of-type(2)	选择每个p元素的是其父级的第二个p元素，从最后一个子项计数	3
:last-child	p:last-child	指定只有选择每个p元素是其父级的最后一个子级。
:first-child	p:first-child	指定只有当<p>元素是其父级的第一个子级的样式

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        /* p:nth-child(2){
            color: aqua;
        } */
        /* p:nth-last-child(2){
            color: blue;
        } */
        /* p:nth-of-type(2){
            color: olive;
        } */
        /* p:nth-last-of-type(2){
            color: chartreuse;
        } */
        /* div:last-child{
            color: coral;
        } */
        /* p:last-child{
            color: cornflowerblue;
        } */
        p:first-child{
            color: blue;
        }
    </style>
</head>
<body>
    <section>
        <p>1111111111111111111111111111111111111111111111111111111111</p>
        <div>1111111111111111111111111111111111111111111111111111111111</div>
        <p>1111111111111111111111111111111111111111111111111111111111</p>
        <p>1111111111111111111111111111111111111111111111111111111111</p>
        <div>1111111111111111111111111111111111111111111111111111111111</div>
        <p>1111111111111111111111111111111111111111111111111111111111</p>
    </section>
    <section>
        <p>2222222222222222222222222222222222222222222222222222222222</p>
        <div>111111111111111111111111111111111111111111111111111111111</div>
        <p>2222222222222222222222222222222222222222222222222222222222</p>
        <p>2222222222222222222222222222222222222222222222222222222222</p>
        <div>111111111111111111111111111111111111111111111111111111111</div>
        <p>2222222222222222222222222222222222222222222222222222222222</p>
    </section>
</body>
</html>

3.CSS3伪元素选择器

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

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        *{
            padding: 0;
            margin: 0;
        }
        /* p::first-letter{
            color: red;
        } */
        p::first-line{
            color: blue;
        }
        section{
            width: 1000px;
        }
        p::before{
            content: "999";
        }
    </style>
</head>
<body>
    <section>
        <p>1111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111</p>
        <div>1111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111</div>
        <p>1111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111</p>
        <p>1111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111</p>
        <div>1111111111111111111111111111111111111111111111111111111111</div>
        <p>111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111</p>
    </section>
    <section>
        <p>2222222222222222222222222222222222222222222222222222222222</p>
        <div>111111111111111111111111111111111111111111111111111111111</div>
        <p>2222222222222222222222222222222222222222222222222222222222</p>
        <p>2222222222222222222222222222222222222222222222222222222222</p>
        <div>111111111111111111111111111111111111111111111111111111111</div>
        <p>2222222222222222222222222222222222222222222222222222222222</p>
    </section>
</body>
</html>

三、CSS3颜色

1.十六进制颜色

＃RRGGBB，其中RR（红色），GG（绿色）和BB（蓝色）。所有值必须介于0和FF之间

相同字母可缩写，如 #FF0000，可缩写为 #F00

2.RGB颜色

RGB（红，绿，蓝）。每个参数（红色，绿色和蓝色）定义颜色的亮度，可在0和255之间，或一个百分比值（从0％到100％）之间的整数。

3.RGBA颜色

RGBA（红，绿，蓝，alpha）。 Alpha参数是一个介于0.0（完全透明）和1.0（完全不透明）之间的参数，可缩写如： 0.5 可写成 .5

p{
background-color:rgba(255,0,0,0.5);

}

4。HSL颜色

HSL（色调，饱和度，明度）。

色调是在色轮上的程度（从0到360），0（或360）是红色的，120是绿色的，240是蓝色的。饱和度是一个百分比值; 0％意味着灰色。100％的阴影是全彩。亮度也是一个百分点; 0％是黑色的，100％是白色的。

p{
background-color:hsl(120,65%,75%);

}

5.HSLA颜色

HSLA（色调，饱和度，亮度，α），α是Alpha参数定义的不透明度。 Alpha参数是一个介于0.0（完全透明）和1.0（完全不透明）之间的参数，可缩写如： 0.5 可写成 .5。

p{
background-color:hsla(120,65%,75%,0.3);

}

四、CSS3 文本效果

1.CSS3 文本阴影

您指定了水平阴影，垂直阴影，模糊的距离，以及阴影的颜色：:

h1{
text-shadow: 5px 5px 5px #FF0000;
}

2.CSS3文本溢出

多行文本溢出和单行文本溢出

见上一篇笔记

五、CSS3 边框

1.CSS3 圆角

在div中添加圆角元素

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

}

圆形设为50%，或者高或宽的一半。

2.CSS3 盒阴影

在div中添加box-shadow属性

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

}

3.CSS3 边界图片

border-image 属性允许你指定一个图片作为边框！用于创建上文边框的原始图像，在 div 中使用图片创建边框:

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 */

}

4.CSS3 实现三角形

三角形实现原理：宽度width为0；height为0；（1）有一条横竖边（上下左右）的设置为border-方向：长度 solid red，这个画的就是底部的直线。其他边使用border-方向：长度 solid transparent。（2）有两个横竖边（上下左右）的设置，若斜边是在三角形的右边，这时候设置top或bottom的直线，和右边的斜线。若斜边是在三角形的左边，这时候设置top或bottom的直线，和左边的斜线。

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            margin: 0 100px;
            padding: 0;
        
        }

        .div1 {
            width: 0;
            height: 0;
            border-left: 50px solid transparent;
            border-right: 50px solid transparent;
            border-bottom: 100px solid red;
        }

        .div2 {
            width: 0;
            height: 0;
            border-left: 50px solid transparent;
            border-right: 50px solid transparent;
            border-top: 100px solid red;
        }

        .div3 {
            width: 0;
            height: 0;
            border-top: 50px solid transparent;
            border-left: 100px solid red;
            border-bottom: 50px solid transparent;
        }

        .div4 {
            width: 0;
            height: 0;
            border-top: 100px solid red;
            border-right: 100px solid transparent;
        }

        .div5 {
            width: 0;
            height: 0;
            border-top: 100px solid red;
            border-left: 100px solid transparent;
        }

        .div6 {
            width: 0;
            height: 0;
            border-bottom: 100px solid red;
            border-right: 100px solid transparent;
        }
    </style>
</head>

<body>
    <div class="div1"></div><br>
    <div class="div2"></div><br>
    <div class="div3"></div><br>
    <div class="div4"></div><br>
    <div class="div5"></div><br>
    <div class="div6"></div><br>
</body>

</html>

六、CSS3框大小

1.CSS3 box-sizing 属性

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

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