找到 1575 篇文章 关于 CSS

使用 CSS 在悬停元素上显示溢出内容

Nancy Den
更新于 2020-06-23 15:48:59

2K+ 阅读量

要显示在元素上悬停时溢出的内容,您可以尝试运行以下代码:示例实时演示                    div.demo {             white-space: nowrap;             width: 180px;             overflow: hidden;             border: 2px solid blue;         }          div.demo:hover {             text-overflow: inherit;             overflow: visible;          }                     悬停以查看下面的完整文本:             此框中将隐藏的演示文本。    

哪个 CSS 属性用于反向运行动画?

Ankith Reddy
更新于 2020-06-23 15:48:25

238 阅读量

使用 animation-direction 属性以反向运行动画。此属性与反向动画值一起使用以实现此目的。示例实时演示                    div {             width: 150px;             height: 200px;             background-color: yellow;             animation-name: myanim;             animation-duration: 2s;             animation-direction: reverse;          }          @keyframes myanim {             from {                background-color: green;             }             to {                background-color: blue;             }          }                        

CSS padding-box 值

usharani
更新于 2020-06-23 15:49:33

191 阅读量

使用 CSS background-origin 属性设置 padding-box 值。使用 padding-box 值,背景图像从填充边缘的左上角开始。您可以尝试运行以下代码来实现 padding-box 值:示例实时演示                    #value1 {             border: 3px solid blue;             padding: 30px;             background: url(https://tutorialspoint.com/assets/videotutorials/courses/html_online_training/380_course_216_image.jpg);             background-repeat: no-repeat;             background-origin: padding-box;          } ... 阅读更多

使用 CSS 为阴影添加模糊效果

Chandu yadav
更新于 2020-06-23 15:47:46

1K+ 阅读量

要为阴影添加模糊效果,请使用 box-shadow 属性。您可以尝试运行以下代码以添加模糊效果示例实时演示                    h2 {             box-shadow: 10px 10px 7px green;             height: 50px;             background-color: yellow;          }                     标题二       上面的标题有阴影。    

使用 CSS 为阴影添加颜色

Daniol Thomas
更新于 2020-06-23 15:44:27

206 阅读量

要为阴影添加颜色,请使用 box-shadow 属性并设置颜色,以及高度和宽度。您可以尝试运行以下代码将颜色设置为阴影:示例实时演示                    h2 {             box-shadow: 10px 10px green;             height: 70px;             background-color: red;          }                     标题二       上面的标题有阴影。    

使用 CSS 选择所有 lang 属性值以“en”开头的元素

Arjun Thakur
更新于 2020-06-23 15:43:53

166 阅读量

使用 [attribute|=”value”] 选择器选择以指定值开头的指定属性的元素。您可以尝试运行以下代码来实现 CSS [attribute|=”value”] 选择器,示例实时演示                    [lang| = en] {             border: 5px solid orange;             border-radius: 5px;          }                     你好       Hei    

如何使用 CSS 创建淡出效果

radhakrishna
更新于 2020-06-23 15:41:57

298 阅读量

要使用 CSS 创建淡出效果,请使用 c 您可以尝试运行以下代码以实现淡出效果:示例实时演示                    #demo {             height: 100px;                background: linear-gradient(to right, rgba(255,50,30,0), rgba(255,50,30,1));             }                           线性渐变       淡出效果    

使用 CSS 设置 input type reset 的样式

varma
更新于 2020-06-23 15:30:52

3K+ 阅读量

input type button 可以是提交按钮或重置按钮。使用 CSS,我们可以为网页上的任何按钮设置样式。您可以尝试运行以下代码以设置 input type button 的样式:示例实时演示                    input[type = submit], input[type = reset] {             background-color: orange;             border: none;             text-decoration: none;             color: white;             padding: 20px 20px;             margin: 20px 20px;             cursor: pointer;          }                     填写以下表单,                主题                    学生                                        

使用 CSS 为表单输入添加背景颜色

Arjun Thakur
更新于 2020-06-23 15:29:53

7K+ 阅读量

要为表单输入添加背景颜色,请使用 background-color 属性。您可以尝试运行以下代码以将背景颜色属性应用于表单示例实时演示                    input[type=text] {             width: 100%;             padding: 10px 15px;             margin: 5px 0;             box-sizing: border-box;             background-color: gray;          }                     填写以下表单,                主题                    学生                    

使用 CSS 设置 select 选项的样式

Nishtha Thakur
更新于 2020-06-23 15:28:35

2K+ 阅读量

要设置 中选项的样式,您可以尝试运行以下代码,示例实时演示                    select {             width: 100%;             padding: 10px 15px;             border: 1px dashed blue;             border-radius: 4px;             background-color: orange;          }                     学习,                             Java             Ruby             Oracle             Tableau                    

广告