css补充知识

最新推荐文章于 2022-05-11 11:02:45 发布

置顶樊之晴

最新推荐文章于 2022-05-11 11:02:45 发布

阅读量200

点赞数

分类专栏：学习笔记文章标签： css3

本文链接：https://blog.youkuaiyun.com/qq_34218095/article/details/80811562

版权

学习笔记专栏收录该内容

6 篇文章

订阅专栏

1.vertical-align有效果的必要场景

作用环境：如果是块级元素父元素设置line-height。

作用对象：子元素中的inline-block和inline元素。

2.图片自适应显示

object-fit: cover;

å¨çº¿æ¼ç¤º

3.文本样式

(1)设置首行缩进：text-indent
(3)字间隔(设置字,单词之间的标准间隔)：word-spacing
(4)字符间隔（设置字符或字母之间的间隔）：letter-spacing
(5)字符转换（大小写）：text-transform
(6)文本装饰：text-decoration
(7)处理空白符：white-space

4.伪元素鲜为人知的用法

::first-letter

当我们要实现一下样式时：

html:

<p>
    <span class="first-letter">H</span>ello, World
</p>

css

.first-letter {
  color: red;
}

上面的代码其实就是：

p::first-letter {
  color: red;
}

::first-line

匹配元素中第一行的文本(只能在块元素中使用)

::selection

匹配被用户选中的部分。

<p>我在学伪元素，我在学伪元素</p>

p::selection {

color: red;

}

5.text-align-last使得文字两端对齐

通过text-align-last:justify设置文本两端对齐

å¨çº¿æ¼ç¤º

6.使用text-overflow控制文本溢出

通过text-overflow:ellipsis对溢出的文本在末端添加...

7.使用letter-spacing排版倒序文本

html:

<div class="bruce flex-ct-x">
<div class="reverse-text">恭喜发财</div>
</div>

css:

.reverse-text {
   font-weight: bold;
   font-size: 50px;
   color: red;
   letter-spacing: -100px; // letter-spacing最少是font-size的2倍
}

å¨çº¿æ¼ç¤º

8.使用:valid和:invalid校验表单

<input>使用伪类:valid和:invalid配合pattern校验表单输入的内容

html:

<div class="bruce flex-ct-x">
   <form class="form-validation">
       <div>
           <label>名字</label>
           <input type="text" placeholder="请输入你的名字(1到10个中文)" pattern="^[\u4e00-\u9fa5]{1,10}$" required>
       </div>
       <div>
           <label>手机</label>
           <input type="text" placeholder="请输入你的手机" pattern="^1[3456789]\d{9}$" required>
       </div>
       <div>
           <label>简介</label>
           <textarea required></textarea>
       </div>
   </form>
</div>

css:

.form-validation {
   width: 500px;
   div {
       margin-top: 10px;
       &:first-child {
           margin-top: 0;
       }
   }
   label {
       display: block;
       padding-bottom: 5px;
       font-weight: bold;
       font-size: 16px;
   }
   input,
   textarea {
       display: block;
       padding: 0 20px;
       outline: none;
       border: 1px solid #ccc;
       width: 100%;
       height: 40px;
       caret-color: $blue;
       transition: all 300ms;
       &:valid {
           border-color: $green;
           box-shadow: inset 5px 0 0 $green;
       }
       &:invalid {
           border-color: $red;
           box-shadow: inset 5px 0 0 $red;
       }
   }
   textarea {
       height: 122px;
       resize: none;
       line-height: 30px;
       font-size: 16px;
   }
}

如下所示：

å¨çº¿æ¼ç¤º

9.使用max-height切换自动高度

通过max-height定义收起的最小高度和展开的最大高度，设置两者间的过渡切换

html:

<div class="bruce flex-ct-x">
   <ul class="auto-height">
       <li>
           <h3>列表1</h3>
           <p>内容1<br>内容2<br>内容3<br>内容4</p>
       </li>
       <li>
           <h3>列表2</h3>
           <p>内容1<br>内容2<br>内容3<br>内容4</p>
       </li>
       <li>
           <h3>列表3</h3>
           <p>内容1<br>内容2<br>内容3<br>内容4</p>
       </li>
   </ul>
</div>

css:

.auto-height {
   width: 300px;
   li {
       margin-top: 5px;
       cursor: pointer;
       &:first-child {
           margin-top: 0;
       }
       &:hover p {
           border-bottom-width: 1px;
           max-height: 600px;
       }
   }
   h3 {
       padding: 0 20px;
       height: 40px;
       background-color: $red;
       cursor: pointer;
       line-height: 40px;
       font-size: 16px;
       color: #fff;
   }
   p {
       overflow: hidden;
       padding: 0 20px;
       border: 1px solid $red;
       border-top: none;
       border-bottom-width: 0;
       max-height: 0;
       line-height: 30px;
       transition: all 500ms;
   }
}

如下所示：

å¨çº¿æ¼ç¤º

10.background-attachment

使用background-attachment:fixed来设置背景图片固定

11.使用filter开启灰色悼念模式

html:

<div class="bruce flex-ct-x">
   <div class="mourning-mode">
       <img src="https://yangzw.vip/static/codepen/car.jpg">
   </div>
</div>

css:

html {
   filter: grayscale(100%);
}
.mourning-mode {
   img {
       width: 400px;
   }
}

如下所示：

å¨çº¿æ¼ç¤º

12.使用linear-gradient控制背景渐变

通过linear-gradient设置背景渐变色并放大背景尺寸，添加背景移动效果

html:

<div class="bruce">
<div class="gradient-bg">iCSS</div>
</div>

css:

.gradient-bg {
   display: flex;
   justify-content: center;
   align-items: center;
   height: 100%;
   background: linear-gradient(135deg, $red, $orange, $green, $blue, $purple) left center/400% 400%;
   font-weight: bold;
   font-size: 100px;
   color: #fff;
   animation: move 10s infinite;
}
@keyframes move {
   0%,
   100% {
       background-position-x: left;
   }
   50% {
       background-position-x: right;
   }
}

如下所示：

å¨çº¿æ¼ç¤º

13.使用linear-gradient控制文本渐变

通过linear-gradient设置背景渐变色，配合background-clip:text对背景进行文本裁剪，添加滤镜动画

html：

<div class="bruce flex-ct-x">
<h1 class="gradient-text">Full Stack Developer</h1>
</div>

css:

.gradient-text {
   background-image: linear-gradient(90deg, $red, $orange);
   background-clip: text;
   line-height: 60px;
   font-size: 60px;
   animation: hue 5s linear infinite;
   -webkit-text-fill-color: transparent;
}
@keyframes hue {
   from {
       filter: hue-rotate(0);
   }
   to {
       filter: hue-rotate(-1turn);
   }
}

如下所示：

å¨çº¿æ¼ç¤º

14.使用caret-color改变光标颜色

通过caret-color自定义光标颜色

15.使用filter模拟Instagram滤镜

通过filter的滤镜组合起来模拟Instagram滤镜

要想使用滤镜我们需要使用一个叫CSSgram的滤镜框架，它提供了多种滤镜样式

1.使用css 外链

<link rel="stylesheet" href="https://cssgram-cssgram.netdna-ssl.com/cssgram.min.css">

由于该框架使用伪类(i.e,::before and ::after)创建滤镜效果，这样你必须在img 外面包裹一层标签

实例html:

<div class="bruce flex-ct-x">
   <ul class="instagram-filter">
       <li>
           <img src="https://yangzw.vip/static/codepen/gz.jpg">
           <p>Default</p>
       </li>
       <li class="_1977">
           <img src="https://yangzw.vip/static/codepen/gz.jpg">
           <p>1977</p>
       </li>
       <li class="aden">
           <img src="https://yangzw.vip/static/codepen/gz.jpg">
           <p>Aden</p>
       </li>
       <li class="brannan">
           <img src="https://yangzw.vip/static/codepen/gz.jpg">
           <p>Brannan</p>
       </li>
       <li class="brooklyn">
           <img src="https://yangzw.vip/static/codepen/gz.jpg">
           <p>Brooklyn</p>
       </li>
       <li class="clarendon">
           <img src="https://yangzw.vip/static/codepen/gz.jpg">
           <p>Clarendon</p>
       </li>
       <li class="earlybird">
           <img src="https://yangzw.vip/static/codepen/gz.jpg">
           <p>Earlybird</p>
       </li>
       <li class="gingham">
           <img src="https://yangzw.vip/static/codepen/gz.jpg">
           <p>Gingham</p>
       </li>
       <li class="hudson">
           <img src="https://yangzw.vip/static/codepen/gz.jpg">
           <p>Hudson</p>
       </li>
       <li class="inkwell">
           <img src="https://yangzw.vip/static/codepen/gz.jpg">
           <p>Inkwell</p>
       </li>
       <li class="kelvin">
           <img src="https://yangzw.vip/static/codepen/gz.jpg">
           <p>Kelvin</p>
       </li>
       <li class="lark">
           <img src="https://yangzw.vip/static/codepen/gz.jpg">
           <p>Lark</p>
       </li>
       <li class="lofi">
           <img src="https://yangzw.vip/static/codepen/gz.jpg">
           <p>LoFi</p>
       </li>
       <li class="maven">
           <img src="https://yangzw.vip/static/codepen/gz.jpg">
           <p>Maven</p>
       </li>
       <li class="mayfair">
           <img src="https://yangzw.vip/static/codepen/gz.jpg">
           <p>Mayfair</p>
       </li>
       <li class="moon">
           <img src="https://yangzw.vip/static/codepen/gz.jpg">
           <p>Moon</p>
       </li>
       <li class="nashville">
           <img src="https://yangzw.vip/static/codepen/gz.jpg">
           <p>Nashville</p>
       </li>
       <li class="perpetua">
           <img src="https://yangzw.vip/static/codepen/gz.jpg">
           <p>Perpetua</p>
       </li>
       <li class="reyes">
           <img src="https://yangzw.vip/static/codepen/gz.jpg">
           <p>Reyes</p>
       </li>
       <li class="rise">
           <img src="https://yangzw.vip/static/codepen/gz.jpg">
           <p>Rise</p>
       </li>
       <li class="slumber">
           <img src="https://yangzw.vip/static/codepen/gz.jpg">
           <p>Slumber</p>
       </li>
       <li class="stinson">
           <img src="https://yangzw.vip/static/codepen/gz.jpg">
           <p>Stinson</p>
       </li>
       <li class="toaster">
           <img src="https://yangzw.vip/static/codepen/gz.jpg">
           <p>Toaster</p>
       </li>
       <li class="valencia">
           <img src="https://yangzw.vip/static/codepen/gz.jpg">
           <p>Valencia</p>
       </li>
       <li class="walden">
           <img src="https://yangzw.vip/static/codepen/gz.jpg">
           <p>Walden</p>
       </li>
       <li class="willow">
           <img src="https://yangzw.vip/static/codepen/gz.jpg">
           <p>Willow</p>
       </li>
       <li class="xpro2">
           <img src="https://yangzw.vip/static/codepen/gz.jpg">
           <p>X-pro II</p>
       </li>
       <li class="obscure">
           <img src="https://yangzw.vip/static/codepen/gz.jpg">
           <p>自定义：Obscure</p>
       </li>
   </ul>
</div>

css:

.instagram-filter {
   display: flex;
   flex-wrap: wrap;
   justify-content: space-between;
   align-content: space-between;
   width: 1635px;
   height: 630px;
   li {
       overflow: hidden;
       position: relative;
       width: 225px;
       height: 150px;
   }
   img {
       width: 100%;
       height: 100%;
   }
   p {
       position: absolute;
       right: 0;
       bottom: 0;
       padding: 0 10px;
       width: fit-content;
       height: 30px;
       background-color: #000;
       filter: none;
       line-height: 30px;
       color: #fff;
   }
}
.obscure {
   filter: brightness(80%) grayscale(20%) contrast(1.2) opacity(.6);
}

效果如下：

å¨çº¿æ¼ç¤º