找到关于 CSS 的1575 篇文章

在 CSS line-height 属性上执行动画

usharani
更新于 2020年7月6日 11:41:51

446 次浏览

要使用 CSS 对 `line-height` 属性实现动画,您可以尝试运行以下代码 - 示例在线演示                    p {             animation: mymove 3s infinite;             line-height: 20px;          }          @keyframes mymove {             70% {                line-height: 50px;             }          }                     这是一段演示文本!这是一段演示文本!这是一段演示文本!          这是一段演示文本!这是一段演示文本!这是一段演示文本!          这是一段演示文本!这是一段演示文本!这是一段演示文本!          这是一段演示文本!这是一段演示文本!这是一段演示文本!          

动画 CSS column-rule-color 属性

varma
更新于 2020年6月25日 14:11:02

171 次浏览

要使用 CSS 对 `column-rule-color` 属性实现动画,您可以尝试运行以下代码:示例在线演示                    div {             width: 600px;             height: 300px;             background: white;             border: 10px solid red;             animation: myanim 3s infinite;             bottom: 30px;             position: absolute;             column-rule: 10px inset ... 阅读更多

在 CSS letter-spacing 属性上执行动画

Ankith Reddy
更新于 2020年6月25日 14:10:23

125 次浏览

要使用 CSS 对 `letter-spacing` 属性实现动画,您可以尝试运行以下代码示例在线演示                    p {             letter-spacing: 3px;             animation: mymove 3s infinite;          }          @keyframes mymove {             70% {                letter-spacing: 20px;             }          }                     我在飞!    

hsla() CSS 函数的使用

Chandu yadav
更新于 2020年6月25日 14:07:42

165 次浏览

要使用色相、饱和度、亮度模型 (HSL) 定义颜色,请使用 hsla() CSS 方法。您可以尝试运行以下代码在 CSS 中实现 hsla() 函数示例在线演示                    h1 {             background-color:hsl(0,100%,50%);          }          h2 {             background-color:hsl(192,89%,48%);          }          p {             background-color:hsla(290,100%,50%,0.3);          }                     红色背景       蓝色背景       这是一段演示文本!    

CSS white-space 属性

vanithasree
更新于 2020年6月25日 14:05:20

123 次浏览

使用 `white-space` 属性处理元素内的空白:示例在线演示                    p.demo1 {             white-space: normal;          }          p.demo2 {             white-space: pre;          }                     控制空白                这是一段演示文本。          这是一段演示文本。                      这是一段演示文本。          这是一段演示文本。          

使用 CSS 重置所有属性

Ankith Reddy
更新于 2020年7月6日 11:28:34

596 次浏览

使用 `all` 属性重置所有属性。将 `all` 属性设置为 `initial`、`inherit` 或 `unset`。示例您可以尝试运行以下代码来实现 CSS `all` 属性在线演示                    html {             color: blue;          }          #demo {             background-color: yellow;             color: red;             all: inherit;          }                     CSS all 属性       这是一段演示文本。    

使用 CSS 将弹性线条显示在容器的开头

varun
更新于 2020年7月6日 11:27:53

69 次浏览

使用值为 `flex-start` 的 `align-content` 属性将弹性线条设置在开头。示例您可以尝试运行以下代码来实现 `flex-start` 值:在线演示                    .mycontainer {             display: flex;             height: 300px;             background-color: blue;             align-content: flex-start;             flex-wrap: wrap;          }          .mycontainer > div {             background-color: orange;             text-align: center;             line-height: 60px;             font-size: 30px;             width: 100px;             margin: 5px;          }                     队列                Q1          Q2          Q3          Q4          Q5          Q6          Q7          Q8          

使用 CSS 设置径向渐变作为背景图像

Chandu yadav
更新于 2020年6月25日 13:40:14

178 次浏览

使用 `radial-gradient()` CSS 函数设置径向渐变作为背景图像。您可以尝试运行以下代码在 CSS 中实现 `linear-gradient()` 函数示例在线演示                    #demo {             height: 200px;             background: radial-gradient(green, orange, maroon);          }                     设置背景为径向渐变。          

CSS nav-down 属性

George John
更新于 2020年6月25日 13:39:32

140 次浏览

当按下键盘上的向下箭头按钮时,`nav-down` 属性用于向下移动。您可以尝试运行以下代码来实现 CSS `nav-down` 属性 示例 在线演示                    button {             position: absolute;          }          button#btn1 {             top: 10%;             left: 15%;             nav-index: 1;             nav-right: #btn2;             nav-left: #btn4;             nav-down: #btn2;             nav-up: #btn4;          }          button#btn2 {             top: 30%;             left: 30%;             nav-index: 2;             nav-right: #btn3;             nav-left: #btn1;             nav-down: #btn3;             nav-up: #btn1;          }          button#btn3 {             top: 50%;             left: 15%;             nav-index: 3;             nav-right: #btn4;             nav-left: #btn2;             nav-down: #btn4;             nav-up: #btn2;          }          button#btn4 {             top: 30%;             left: 0%;             nav-index: 4;             nav-right: #btn1;             nav-left: #btn3;             nav-down: #btn1;             nav-up: #btn3;          }                     结果1       结果2       结果3       结果4    

CSS `font-size-adjust` 属性

usharani
更新于 2020年6月25日 13:38:57

127 次浏览

使用 `font-size-adjust` 属性在字体回退发生时保持可读性。您可以尝试运行以下代码来实现 `font-size-adjust` 属性:示例 在线演示                    #demo {             font-size-adjust: 0.90;          }                     副标题       使用 font-size-adjust 属性:                这是演示文本。             未使用 font-size-adjust 属性:       这是演示文本。    

广告