IT入门 > 教程 > css教程 >

CSS :valid 选择器

实例 如果 input 元素中输入的值为合法的，设置其为黄色: input:valid{ background-color: yellow;} 尝试一下 » 定义和使用 :valid 选择器在表单元素的值需要根据指定条件验证时设置指定样式。 注...

CSS :invalid 选择器

实例 如果 input 元素中的值是非法的，设置样式为红色： input:invalid{ border:2px solid red;} 尝试一下 » 定义和使用 :invalid 选择器用于在表单元素中的值是非法时设置指定样式。 注意： :in...

CSS border-bottom-color 属性

实例 设置底部边框颜色： p { border-style:solid; border-bottom-color:#ff0000;} 尝试一下 » 标签定义及使用说明 border-bottom-color属性设置元素的底部边框颜色。 注意 使用border-bottom颜色属性前，必...

CSS3 filter(滤镜) 属性

实例 修改所有图片的颜色为黑白 (100% 灰度): img { -webkit-filter: grayscale(100%); /* Chrome, Safari, Opera */ filter: grayscale(100%);} 尝试一下 » 定义和使用 filter 属性定义了元素(通常是img)的可视效果...

CSS flex 属性

实例 让所有弹性盒模型对象的子元素都有相同的长度，且忽略它们内部的内容： #main div{ flex:1;} 尝试一下 » 浏览器支持 表格中的数字表示支持该属性的第一个浏览器的版本号。 紧跟在...

CSS flex-basis 属性

实例 设置第二个弹性盒元素的初始长度为 80 像素： div:nth-of-type(2) {flex-basis: 80px;} 尝试一下 » 浏览器支持 表格中的数字表示支持该属性的第一个浏览器的版本号。 紧跟在 -webkit-, -ms-...

CSS flex-grow 属性

实例 让第二个元素的宽度为其他元素的三倍： div:nth-of-type(1) {flex-grow: 1;}div:nth-of-type(2) {flex-grow: 3;}div:nth-of-type(3) {flex-grow: 1;} 尝试一下 » 浏览器支持 表格中的数字表示支持该属性的第...

CSS flex-shrink 属性

实例 A, B, C 设置 flex-shrink:1， D , E 设置为 flex-shrink:2： !DOCTYPE htmlhtmlheadmeta charset="utf-8"title嘀嗒教程(dida100.com)/titlestyle#content { display: flex; width: 500px;} #content div { flex-basis: 120px; border: 3px...

CSS order 属性

实例 设置弹性盒对象元素的顺序： div#myRedDIV {order:2;}div#myBlueDIV {order:4;}div#myGreenDIV {order:3;}div#myPinkDIV {order:1;} 尝试一下 » 浏览器支持 表格中的数字表示支持该属性的第一个浏览器的版...

CSS text-decoration-color 属性

实例 改变下划线文本中下划线的颜色： p{text-decoration: underline;text-decoration-color: red;-moz-text-decoration-color: red; /* 针对 Firefox 的代码 */} 尝试一下 » 浏览器支持 几乎所有的主流浏览器都不...