9、css3选择器、阴影、圆角边框、背景、怪异模型-CSDN博客

本文链接：https://blog.csdn.net/m0_58779986/article/details/135461417

css3选择器：

包括：属性选择器、伪类选择器、伪元素选择器

属性选择器

选择所有带有x属性的元素【x】
选择所有带有x属性名且属性值是y的元素【x=“y”】
选择所有带有x属性名且属性值是包含子字符串y的元素【x*=”y“】
选择所有带有x属性且属性值是以y开头的元素【x^=”y“】
选择所有带有x属性且属性值是以y结尾的元素【x$=”y“】
选择所有带有x属性且属性值是以y-开头的元素【x|=”y“】

<style>
      [name|='get'] {
        text-decoration: line-through;
      }
</style>
<body>
    <footer name="get-result">我是底部标签</footer>
    <div name="getresult">我是盒子标签</div>
</body>

伪元素选择器

::first-letter选择第一个汉子或者第一个字母（只能用于块元素）
::first-line选择第一行文本（只能用于块元素）
::after在当前元素的里边的后边添加元素
- content:'内容';
- display:block; 换行

<style>
.box::after {
        content: '我在box的后边';
        /* 会换行 */
        display: block;
        width: 200px;
        height: 80px;
        background-color: purple;
      }
</style>
<body>
 <div class="box">
      study真道心要来去自如，入得山，也入得人间。红尘炼心，事来则应，去不留心，是考验也是磨练。
    </div>
</body>

::before在当前元素的里边的前添加元素
- content:'内容';
- display:block; 换行
  注意：::first-letter优先级高于::first-line

伪类选择器（优先级一样）

:first-child：选择当前的元素中使其父元素的第一个子元素
- li 前面不能有其他标签
:last-child：选择当前的元素中使其父元素的最后一个子元素
- li必须是最后一个才可以
:nth-child(n):选择当前的元素中使其父元素的第n个子元素
- ul下的所有标签个数包括p标签但是不能设置p标签
:nth-of-type(n):选择当前的元素中使其父元素的第n个当前的元素的位置
- 第n个子元素除p标签外

<style>
      ul.list > li:nth-of-type(3){
      background-color: red;
      }
</style>
 <body>
    <ul class="list">
      <p>我是list的第一个p</p> 
      <li>第一行</li>
      <li>第二行</li>
      <p>我是list的第一个p</p>
      <li>第三行</li>
      <li>第四行</li>
      <li>第五行</li>
      <li>第六行</li>
    </ul>
  </body>

`css3`颜色

HSL颜色：color: hsl(0, 100%, 50%);一般这样设置
HSL代表色相，饱和度和亮度 color: hsl(hue, saturation, lightness);
- hue: 色调;色度;色相（从0到360） 0（或360）是红色的，120是绿色的，240是蓝色的
- saturation:饱和度是一个百分比值; 0％意味着灰色。100％的阴影是全彩
- lightness:明亮;亮度也是一个百分点; 0％是黑色的，100％是白色的

阴影（不占位置）

文本阴影 `text-shadow`

text-shadow:水平阴影垂直阴影影子的模糊距离阴影的颜色
text-shadow:-20px -15px 5px hsl(360,100%,50%);
- 水平和垂直阴影正负代表的是方向：正数水平向右和垂直向下，负数是水平向左和垂直向上

<style>
/* 包含字符串yin */
    [b*="yin"]{
/* `text-shadow:`水平阴影  垂直阴影  影子的模糊距离(数值越小越清楚)  阴影的颜色 */
        text-shadow:-20px -15px 1px hsl(100,100%,50%);
    }
</style>
<body>
    <p b="yinying">我是阴影效果</p>
</body>

盒子阴影 `box-shadow`

如果不兼容情况下
-webit-text-shadow:-20px -15px 5px hsl(360,100%,50%);
-webkit- 谷歌 safari
-moz- 火狐
-ms- IE-o- 欧朋
水平阴影垂直阴影影子的模糊距离阴影的颜色
box-shadow: 0px -5px 1px #333, 0px 5px 1px #ccc;

圆角边框

四个值：左上右上右下左下
border-radius:10px 20px 50px 100px
三个值：左上右上左下右下
border-radius:10px 50px 100px
两个值：左上右下右上左下
border-radius:50px 100px

长方形：

<style>
	[classOne*='Obj'] {
        margin: 100px auto;
        width: 600px;
        height: 300px;
        font-size: 50px;
        background-color: hsl(123, 56%, 22%);
        /* 大于等于高度的一半：胶囊型（操场型） */
        border-radius: 500px;
        /* 大于等于50%：鸡蛋型 */
        border-radius: 120%;
      }
</style>
<body>
    <header classOne="hObj"></header>
</body>

正方形：

<style>
	 [sec|='set'] {
        margin: 0 auto;
        width: 500px;
        height: 500px;
        background-color: hsl(320, 80%, 30%);
        /* 大于等于高度的一半：圆*/
        /* border-radius: 150px; */
        /* 大于等于50%  圆 */
        border-radius: 50%;
      }
</style>
<body>
    <section sec="set-one"></section>
</body>

三角型：

transparent透明的

<style>
    [name^="Tr"]{
        margin: 50px auto;
        width: 0;
        height: 0;
        border-top:50px solid hsl(100, 100%, 50%);
        border-right:50px solid hsl(220, 100%, 50%);
        border-bottom:50px solid transparent;
        border-left:50px solid transparent;
    }
</style>
<body>
    <div name="Triangle"></div>
</body>

一般用于按钮的禁用

css3新增的
cursor:not-allowed;

<style>
    button{
        cursor: not-allowed;
    }
</style>
<body>
    <button>按钮</button>
</body>

怪异盒模型`box-sizing:border-box;`

边框和内边距不会影响盒子的大小内容会自动缩小

背景

背景图的修剪默认包含内边距、边框、内容
background-clip:border-box
- 只有内容区域和内边距区域
  background-clip:padding-box;
- 只有内容区域
  background-clip:content-box;

- 背景图
  - background-origin: border-box;
  - background-origin: padding-box;
  - background-origin: content-box;
<style>
    /* 以x结尾的 */
    [name$="x"]{
        margin: 50px auto;
        width: 400px;
        height: 300px;
        border: 10px dashed red;
        padding: 20px;
        /* 设置前必须要去掉重复 */
        background-repeat: no-repeat;
        background-image: url(./images/adv.jpg);
        /* 默认的 */
        background-origin: border-box;
        background-origin: padding-box;
        background-origin: content-box;
    }
</style>
<body>
    <div name="box"></div>
</body>