【CSS3】文本属性，边框图片，透明度，小米轮播图子菜单另一种实现，覆盖准则，练习

原创已于 2023-11-27 15:16:42 修改 · 693 阅读

1 ·

本内容遵循CC 4.0 BY-SA版权协议

标签

#css3 #css #html

于 2022-12-08 17:21:07 首次发布

CSS 专栏收录该内容

14 篇文章

订阅专栏

本文深入探讨CSS的各种高级应用技巧，包括文本属性、边框图片、透明度处理等，并通过实例展示了小米轮播图子菜单的多种实现方法及优雅降级方案。

❤️ Author：老九
☕️ 个人博客：老九的CSDN博客
🙏 个人名言：不可控之事乐观面对
😍 系列专栏：

text类型的属性

text-decoration

用于设置文字的装饰线，有none(无任何装饰线，可以去除a元素默认的下划线)，underline(下划线)， line-through(中划线，删除线)，overline(上划线)
a元素默认有一个text-decoration

text-transform

设置文字的大小写转换

text-indent

用于文本的缩进
单位可能会用em，em单位是以font-size的几倍

text-align

这个是控制文本的对齐方式，这个属性是行内级的元素 ，定义行内内容如何相对它的块级父元素对其
常见值有left，right，center，justify（两端对齐，最后一行不会分配，其他行都是两端对齐，如果想让最后一行也生效，设置text-align-last：justify）
如果想让img标签在div盒子中居中显示，可以设置text-align:center

补充：块级元素设置水平居中，margin:0 auto

text-shadow

text-shadow：x y blur-radius color；x是水平偏移量，y是垂直偏移量，blur-radius是模糊半径。阴影不影响布局，可以写好几层。

text-overflow

这个可以设置文本超出去后的样式，只能用在单行文本上，必须搭配overflow：hidden和whtie-space：nowrap使用

letter-spacing

设置字母和字母之间的间隔，默认是0，可以设置为负数

word-spacing

设置单词和单词之间的间隔，默认是0，可以设置为负数

边框图片

选取一个图片，得到这八份变成一个边框，首先要是用边框图片，得先设置一个边框，然后用slice裁剪出一个边框

border-image-source

border-image-source:url(xxx);可以设置边框图片

border-image-slice

border-image-slice:36 fill;36像素就是从边框最外到最里面的距离是36个像素，如果后面加了一个fill，那么原来的图片就会填充元素，并且可以盖住背景图片

border-image-width

border-image-width：80px，这个可以控制边框的宽度，边框向内蔓延80px，这个不影响布局。

border-image-outset

border-image-outset:3px;这个可以控制外边框的位置可以向往蔓延。

border-image-repeat

border-image-repeat，值可以是repeat（第一张在正中间重复，然后两边开始重复），round（取整重复），stretch（拉伸重复）

透明度

关键字是opacity，取值是0-1，透到0就完全没了，父元素变透明了，子元素也会跟着变透明。
rgba的a也是控制透明度的。

Graceful Degradation(优雅降级)

对于旧浏览器不认识透明度，可以使用优雅降级的方法。浏览器更新，就看的更好，浏览器老，就保证还能用。

p{
	color:red;
	color:rgba(255,0,0,0.75);
}

小米轮播图子菜单另一种实现

用块元素实现的，使用了scss方法

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
  <style>
$count-per-column:4;
$item-width:100px;
$item-height:40px;
ul {
      padding: 0;
      list-style: none;
      height: $count-per-column * $item-height;
      border: 2px solid red;
      position: absolute;
    }

    li {
      height: $item-height;
      width: $item-width;
    }

@for $i from 1 to 5{
    li:nth-child(n + #{$i *4 +1}){
        margin-left: $i * $item-width;
    }
}
    li:nth-child(#{$count-per-column}n + #{$count-per-column + 1}){
	margin-top:-$item-height * $count-per-column;
}
  </style>
</head>
 <body>
<ul>
  <li>1</li>
  <li>2</li>
  <li>3</li>
  <li>4</li>
  <li>5</li>
  <li>6</li>
  <li>7</li>
  <li>8</li>
  <li>9</li>
</ul>
</body>
</html>

覆盖准则

后面的块元素盖住前面的块元素
后面的行内元素盖住前面的行内元素
行内元素总是盖住块元素
浮动元素盖住块元素，行内元素盖住浮动元素

hover切换效果完整实现

visibility属性在hidden的时候，位置还在，并且还可以让其子元素显示，但是display：none就不能做到。

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
  <style>
  *{
  background-color: rgba(0,0,0,0.08);
  box-shadow:inset 0 0 1px red;
}
body{
  zoom:2;
}
div.foo{
  float:right;
  display:flex;
  position:relative;
  justify-content:flex-end;

}
span {
  height: 40px;
  color:gold;
  transition:color 0s 9999999999999s;
}
div.foo span:first-child{
  color:red;
}
div.foo:hover span{
  transition:none;
  color:gold;
}

div.foo span:hover{
  transition:none;
  color:red;
}
div.foo div{
  /*display:none变成block后不能用动画，所以使用visibility*/
  visibility:hidden;
  position:absolute;
  right:0;
  top:100%;
  width: 100%;
  height: 300px;
  transition:visibility 0s 9999s;
}

div.foo span:first-child >div{
  visibility:visible;
}
div.foo:hover span div{
  visibility:hidden;
  /*transition：none，这个就是突然的意思*/
  transition:none;
}

div.foo span:hover >div{
  visibility:visible;
  transition:none;
}</style>
</head>
<body>
<div class="foo">
  <span>Lorem.  <div>content111</div></span>

  <span>Illum.  <div>content222</div></span>

  <span>Voluptatum!  <div>content333</div></span>


</div>
</body>
</html>

scroll-behavior

这个设置在html上，可以实现平滑页面滚动。

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
  <style>
  body{
  zoom:2;
  display:flow-root;
  margin: 0;
}
html{
  scroll-behavior:smooth;
}</style>
</head>
<body>
  <div id="top"></div>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Officiis, vero excepturi? Est doloribus eaque nam ullam necessitatibus quaerat, recusandae aspernatur facilis temporibus fuga dignissimos ea doloremque tempora voluptate eum quia.</p>
<p>Optio enim possimus, accusantium temporibus, asperiores obcaecati explicabo repudiandae, quos quisquam minus nesciunt dolorum odio officia, expedita maiores perspiciatis eius illo a accusamus exercitationem magnam aliquam impedit! Rerum libero, blanditiis!</p>
<p>Totam aut accusamus accusantium, tempora, quidem, qui reprehenderit et assumenda voluptatum obcaecati nam vero consectetur dolorum error debitis reiciendis, pariatur. Et laborum aspernatur nobis delectus sapiente laboriosam nemo dolore quisquam!</p>
<p>Quidem tempora quis libero, perspiciatis asperiores vitae, ex dolor magnam atque. Ratione, suscipit at, qui quidem facere modi velit eaque cum voluptatum, autem mollitia illo eligendi reiciendis in cumque accusantium.</p>
<p>Adipisci dolore recusandae deleniti quis aliquam ullam voluptate dolor unde assumenda eveniet, quas corrupti reiciendis omnis sunt impedit, natus vero modi accusantium molestiae praesentium obcaecati! Recusandae voluptatibus minima quod sequi!</p>
<p>Quidem nisi maiores et repudiandae, qui delectus, maxime sint sit totam soluta, tempore quae quos aliquid voluptates assumenda fugit, debitis pariatur aperiam! Expedita qui beatae inventore quisquam quae odio, cum.</p>
<p>Quo accusamus asperiores mollitia adipisci doloribus odit qui eos perferendis exercitationem quas quia, nisi animi, reprehenderit corporis. Nam deleniti impedit, maiores nobis eius voluptatem iusto, suscipit totam mollitia earum eligendi!</p>
<p>Dicta hic voluptas accusamus commodi ab? Nisi magnam animi, vitae eaque aspernatur, dolor soluta harum illo beatae illum fugiat labore aperiam suscipit explicabo modi nemo ipsum eos, iusto perferendis omnis.</p>
  <a href="#top"> go top</a>
</body>
</html>

导航菜单与区域颜色不同

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
  <style>
  * {
  background-color: rgba(0,0,0,0.1);
  box-shadow: 0 0 1px red;
}
html {
  zoom: 2;
}
ul {
  padding: 0;
  margin: 0;
}
body {
  margin: 0;
  
}
section {
  height: 300px;
  position: relative;
}
div {
  border: 1px solid blue;
  position: absolute;
  height: 100%;
  width: 100%;
  clip: rect(auto, auto, auto, auto);
  xclip-path: border-box;
  
}

ul {
  position: fixed;
  right: 0;
  margin: auto;
  top: 0;
  bottom: 0;
  height: 110px;
}

section:nth-child(1) ul {
  color: red;
}
section:nth-child(2) ul {
  color: lime;
}
section:nth-child(3) ul {
  color: tan;
}
section:nth-child(4) ul {
  color: violet;
}
section:nth-child(5) ul {
  color: magenta;
}





</style>
</head>
<body>
  <section>
    <div>
      <ul>
        <li>001</li>
        <li>002</li>
        <li>003</li>
        <li>004</li>
      </ul>
    </div>
  </section>
  <section>
    <div>
      <ul>
        <li>001</li>
        <li>002</li>
        <li>003</li>
        <li>004</li>
      </ul>
    </div>
  </section>
  <section>
    <div>
      <ul>
        <li>001</li>
        <li>002</li>
        <li>003</li>
        <li>004</li>
      </ul>
    </div>
  </section>
  <section>
    <div>
      <ul>
        <li>001</li>
        <li>002</li>
        <li>003</li>
        <li>004</li>
      </ul>
    </div>
  </section>
  <section>
    <div>
      <ul>
        <li>001</li>
        <li>002</li>
        <li>003</li>
        <li>004</li>
      </ul>
    </div>
  </section>
  <div>
    <ul>
      <li>一区aaa</li>
      <li>二区aaaa</li>
      <li>三区aaaaaa</li>
      <li>四区aaa</li>
      <li>五区bbsdfsdf</li>
    </ul>
  </div>
  <div>
    <ul>
      <li>一区aaa</li>
      <li>二区aaaa</li>
      <li>三区aaaaaa</li>
      <li>四区aaa</li>
      <li>五区bbsdfsdf</li>
    </ul></div>
  <div>
    <ul>
      <li>一区aaa</li>
      <li>二区aaaa</li>
      <li>三区aaaaaa</li>
      <li>四区aaa</li>
      <li>五区bbsdfsdf</li>
    </ul></div>
  <div>
    <ul>
      <li>一区aaa</li>
      <li>二区aaaa</li>
      <li>三区aaaaaa</li>
      <li>四区aaa</li>
      <li>五区bbsdfsdf</li>
    </ul></div>
  <div>
    <ul>
      <li>一区aaa</li>
      <li>二区aaaa</li>
      <li>三区aaaaaa</li>
      <li>四区aaa</li>
      <li>五区bbsdfsdf</li>
    </ul></div>
</body>
</html>