CSS

首页 » Archive by category 'CSS'

w3cmm

用backdrop-filter做IOS毛玻璃效果

目前支持的浏览器有Safari 9 +, iOS 9 + @supports (-webkit-backdrop-filter: none) or (backdrop-filter: none) { .header { background: rgba(255, 255, 255, .6); -webkit-backdrop-filter: brightness(1.5) blur(4px); backdrop-filter: brightness(1.5) blur(4px); } }

目录 CSS |
w3cmm

CSS画iOS7图标

<!DOCTYPE HTML> <html> <head>     <meta charset=”utf-8″ />     <title>IOS 7</title>     <style>     .ios7 {         position: relative;         width: 250px;         height: 250px;         margin: 0 auto;         text-align: center;         background: #FFF;         box-shadow: inset 0 0 20px rgba … 继续阅读

目录 CSS |
w3cmm

CSS隐藏文本

有时候我们需要隐藏文本,text-indent:-9999px有很多弊端,比如消耗性能… .hide-text { text-indent: 100%; white-space: nowrap; overflow: hidden; }

目录 CSS |
w3cmm

grayscale

有时候需要做一些灰色的图片,鼠标划上去恢复彩色。IE6-9使用filter: gray即可实现,其他浏览器使用grayscale(100%)也可实现,但目前Firefox尚不支持,需要svg滤镜来实现 .grayscale{ -webkit-filter:grayscale(1); /* Chrome 19+ & Safari 6+ */ /* Firefox 3.5+ */ filter:url(‘data:image/svg+xml;utf8,<svg xmlns=\’http://www.w3.org/2000/svg\’><filter id=\’grayscale\’><feColorMatrix type=\’matrix … 继续阅读

目录 CSS |
w3cmm

RGBA和HSLA

在CSS3里我们可以使用RGBA和HSLA两种色彩模式,二者均可以用来在设置颜色的同时指定其它透明度。RGBA指的是“红色、绿色、蓝色和Alpha透明度”,而HSLA则代表“色调、饱和度、亮度和Alpha透明度”。 继续阅读

目录 CSS |
w3cmm

border-radius

现在CSS3已经可以轻松实现跨浏览器的圆角效果,包括Firefox高版本,IE9,Safari,Chrome等高端浏览器。其中 -moz-border-radius 是 Firefox 实现圆角的私有属性,而 -webkit-border-radius是 webkit 内核浏览器(如 Safari 和 Chrome)实现圆角的私有属性。 继续阅读

目录 CSS |