css 有不少常用的效果, 你在平时浏览网站的时候可能会看到, 但是真的要自己写的时候, 有时候会突然忘记, 今天稍微对那些常见的效果做一下小结.
1, 每逢大的灾难的时候, 很多网站变成了灰色, 如何让网站快速变灰? css 代码是很简单的, 用的是 css 的 filter 功能.
代码如下:
css 代码
- html {
- filter: grayscale(100%);//IE 浏览器
- -webkit-filter: grayscale(100%);// 谷歌浏览器
- -moz-filter: grayscale(100%);// 火狐
- -ms-filter: grayscale(100%);
- -o-filter: grayscale(100%);
- filter:progid:DXImageTransform.Microsoft.BasicImage(grayscale=1);
- -webkit-filter: grayscale(1);// 谷歌浏览器
- }
注: 有一些网站 FLASH 动画的颜色不能被 CSS 滤镜控制, 可以在 FLASH 代码的和之间插入:
html 代码
- <param value="false" name="menu"/>
- <param value="opaque" name="wmode"/>
- 2,DIV 可编辑, 就是让一个 div 变成一个类似 input 输入框的效果.
- 在 div 中添加 contentEditable="true" 属性就可以了, 如下:
- html 代码
- <div id="div1" contentEditable="true"></div>
- <div id="div2" contentEditable="true"></div>
- 3, 有些网站为了不让用户复制, 设置了 div 禁止选择的功能, 设置如下属性:
- html 代码
- unselectable="on" onselectstart="return false;"
- 具体代码:
- html 代码
- <div unselectable="on" onselectstart="return false;">
- 你想复制我? 门儿都没有!!!
- </div>
- 4,CSS 中 form 表单两端对齐
- 做 form 表单的时候, 前面经常有姓名, 年龄, 公司名称等等, 有的是 2 个字, 有的是 4 个字, 如何让字对齐呢? 有的人的做法是打几个空格, 但是这样不是很准确, 最好的办法是如下:
- html 代码
- <!DOCTYPE html>
- <html lang="zh">
- <head>
- <meta charset="UTF-8" />
- <style type="text/css">
- td {
- text-align:justify;
- text-justify:distribute-all-lines;/*ie6-8*/
- text-align-last:justify;/* ie9*/
- -moz-text-align-last:justify;/*ff*/
- -webkit-text-align-last:justify;/*chrome 20+*/
- }
- @media screen and (-webkit-min-device-pixel-ratio:0){/* chrome*/
- td:after{
- content:".";
- display: inline-block;
- width:100%;
- overflow:hidden;
- height:0;
- }
- }
- </style>
- </head>
- <body>
- <table border="1" cellspacing="1" cellpadding="10">
- <tr>
- <td > 姓名:</td>
- </tr>
- <tr>
- <td > 工作单位:</td>
- </tr>
- <tr>
- <td > 操作:</td>
- </tr>
- <tr>
- <td > 所在地:</td>
- </tr>
- </table>
- </body>
- </html>
- 原来样式:
- 5,input 声音录入按钮,(仅支持谷歌)
- 如下图红色框框中的按钮:
- 代码如下:
- html 代码
- <!-- 添加 x-webkit-speech 属性就可以了. -->
- <input type="text" class="box" name="s" id="s" class="inputText" placeholder="输入关键词" x-webkit-speech>
- 6, 给 input 的 placeholder 设置颜色
- 代码如下:
- css 代码
- ::-webkit-input-placeholder { /* WebKit browsers */
- color: #999;
- }
- :-moz-placeholder { /* Mozilla Firefox 4 to 18 */
- color: #999;
- }
- ::-moz-placeholder { /* Mozilla Firefox 19+ */
- color: #999;
- }
- :-ms-input-placeholder { /* Internet Explorer 10+ */
- color: #999;
- }
- 7,css3 实现一个 div 设置多张背景图片及 background-image 属性
- css 代码
- div{
- background:url("1.jpg") 0 0 no-repeat,
- url("2.jpg") 200px 0 no-repeat,
- url("3.jpg") 400px 201px no-repeat;
- }
- /* 也可以这么写 */
- div{
- background-image:url("1.jpg"),url("2.jpg"),url("3.jpg");
- background-repeat: no-repeat, no-repeat, no-repeat;
- background-position: 0 0, 200px 0, 400px 201px;
- }
- 8,CSS 选中状态修改
- html 代码
- <!DOCTYPE html>
- <html lang="zh">
- <head>
- <meta charset="UTF-8" />
- <style type="text/css">
- ::selection {
- background: yellowgreen;
- color: red;
- }
- </style>
- </head>
- <body>
- <p > 我虽然是一个段落标签, 但经常被人冷落.</p>
- </body>
- </html>
9,css input 样式美化, input 上传按钮美化
html 代码
- <!DOCTYPE html>
- <html lang="zh">
- <head>
- <meta charset="UTF-8" />
- <style type="text/css">
- .file {
- position: relative;
- display: inline-block;
- background: #D0EEFF;
- border: 1px solid #99D3F5;
- border-radius: 4px;
- padding: 4px 12px;
- overflow: hidden;
- color: #1E88C7;
- text-decoration: none;
- text-indent: 0;
- line-height: 20px;
- }
- .file input {
- position: absolute;
- font-size: 100px;
- right: 0;
- top: 0;
- opacity: 0;
- }
- .file:hover {
- background: #AADFFD;
- border-color: #78C3F3;
- color: #004974;
- text-decoration: none;
- }
- </style>
- </head>
- <body>
- <a href="javascript:;" class="file">选择文件
- <input type="file" name=""id="">
- </a>
- </body>
- </html>
10,CSS :after 和: before 选择器
html 代码
- <!DOCTYPE html>
- <html lang="zh">
- <head>
- <meta charset="UTF-8" />
- <style type="text/css">
- .test-div{
- position: relative; /* 日常相对定位 */
- width:150px;
- height:36px;
- border-radius:5px;
- border:black 1px solid;
- background: rgba(245,245,245,1)
- }
- .test-div:before{
- content: ""; /*:before 和: after 必带技能, 重要性为满 5 颗星 */
- display: block;
- position: absolute; /* 日常绝对定位 */
- top:8px;
- width: 0;
- height: 0;
- border:6px solid transparent;
- left:-12px;
- border-right-color: #000;
- }
- </style>
- </head>
- <body>
- <div class="test-div"></div>
- </body>
- </html>
11, 透明度
css 代码
- div{
- opacity: .9;
- filter:alpha(opacity=90)
- }
- /* IE7 和 IE6 中 opacity 是没有用的, 在 IE6 中 DIV 透明的方法一般用 filter; */
- .div{
- opacity: 0;
- cursor:pointer;
- -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
- filter: alpha(opacity=0);
- }
12, 超出长度显示省略号
单行文本显示...
html 代码
- <!DOCTYPE html>
- <html lang="zh">
- <head>
- <meta charset="UTF-8" />
- <style type="text/css">
- /* 一般要指定宽度, 然后给如下四个属性. */
- span{
- width:200px;
- display:block;
- overflow:hidden;
- white-space:nowrap;
- text-overflow:ellipsis;
- }
- </style>
- </head>
- <body>
- <span > 我是单行文字省略我是单行文字省略</span>
- </body>
- </html>
多行文本显示.... (主要属性 - webkit-line-clamp)
html 代码
- <!DOCTYPE html>
- <html lang="zh">
- <head>
- <meta charset="UTF-8" />
- <style type="text/css">
- /* 一般要指定宽度, 然后给如下四个属性. */
- p {
- width: 200px;
- overflow : hidden;
- text-overflow: ellipsis;
- display: -webkit-box;
- -webkit-line-clamp: 2;
- -webkit-box-orient: vertical;
- }
- </style>
- </head>
- <body>
- <p > 我是多行文字省略我是多行文字省略我是多行文字省略行文字省略行文字省略行文字省略</p>
- </body>
- </html>
这个属性比较合适 WebKit 浏览器或移动端 (绝大部分是 WebKit 内核的) 浏览器.
跨浏览器兼容的方案
比较靠谱简单的做法就是设置相对定位的容器高度, 用包含省略号 (...) 的元素模拟实现;
css 代码
- p {
- position:relative;
- line-height:1.4em;
- /* 3 times the line-height to show 3 lines */
- height:4.2em;
- overflow:hidden;
- }
- p::after {
- content:"...";
- font-weight:bold;
- position:absolute;
- bottom:0;
- right:0;
- padding:0 20px 1px 45px;
- // background:url(和网页背景颜色一样的一张背景图) repeat-y;
- background-color:#fff;
- }
- /*
- 注意:
- height 高度正好是 line-height 的 3 倍;
- 结束的省略好用了半透明的 png 做了减淡的效果, 或者设置背景颜色;
- IE6-7 不显示 content 内容, 所以要兼容 IE6-7 可以是在内容中加入一个标签, 比如用... 去模拟;
- 要支持 IE8, 需要将::after 替换成: after;
- */
13, 阴影效果
css 代码
- /* 盒子阴影 */
- box-shadow: 2px 2px 10px 4px #333333;
- /* 文子阴影 */
- text-shadow: 1px 1px 0px #fff;
14,CSS 强制换行和不换行
css 代码
- /* 自动换行 */
- div{
- word-wrap: break-word;
- word-break: normal;
- }
- /* 强制英文单词断行 */
- div{
- word-break:break-all;
- }
- /* 强制不换行 */
- div{
- white-space:nowrap;
- }
15,CSS 圆角
IE 9,Opera 10.5,Safari 5,Chrome 4 和 Firefox 4, 都支持上述的 border-radius 属性. 早期版本的 Safari 和 Chrome, 支持 - webkit-border-radius 属性, 早期版本的 Firefox 支持 - moz-border-radius 属性. 目前来看, 为了保证兼容性, 只需同时设置 - moz-border-radius 和 border-radius 即可.
css 代码
- -moz-border-radius: 15px;
- border-radius: 15px;
- /* (注意: border-radius 必须放在最后声明, 否则可能会失效.) */
- /* 另外, 早期版本 Firefox 的单个圆角的语句, 与标准语法略有不同. */
- -moz-border-radius-topleft(标准语法: border-top-left-radius)
- -moz-border-radius-topright(标准语法: border-top-right-radius)
- -moz-border-radius-bottomleft(标准语法: border-bottom-left-radius)
- -moz-border-radius-bottomright(标准语法: border-bottom-right-radius)
16,css3 弹性布局 flex
这里我就不做总结了, 下面链接两个超级大神讲解的非常棒:
Flex 布局教程: 语法篇 http://www.haorooms.com/post/css_common
Flex 布局教程: 实例篇 http://www.ruanyifeng.com/blog/2015/07/flex-examples.html
17,textarea 禁止拖动
css 代码
- resize: none; // 禁止拖动
- /*
- 以下是 resize 属性的的各个取值:
- none: 用户不能操纵机制调节元素的尺寸;
- both: 用户可以调节元素的宽度和高度;
- horizontal: 用户可以调节元素的宽度;
- vertical: 让用户可以调节元素的高度;
- inherit: 默认继承.
- */
18,div 垂直居中的方法总结
个人觉得这个总结的不错:
css 的 div 垂直居中的几种方法 http://www.haorooms.com/post/css_div_juzhong
css 固定宽高 DIV 内部元素垂直居中的方法 http://www.haorooms.com/post/div_guding_inner_center
19,CSS3 的一些前缀总结
css3 为了更好的兼容多个浏览器, 通常前面加一大堆前缀, 有时候感觉很烦, 前缀也容易忘记或者漏掉. 下面总结一下!
-webkit 为 Chrome/Safari
-moz 为 Firefox
-ms 为 IE
-o 为 Opera
20,css3 的 box-sizing
给了两个并排带边框的 div 百分比宽度, 假如不用 box-sizing, 边框的宽度会在行内显示. 用 box-sizing:border-box, 可以去除边框的占位, 通俗讲它就是一个铁盒子, 浏览器支持 IE9 以上及火狐, 谷歌, Opera 等等
案例如下:
html 代码
- <!DOCTYPE html>
- <html lang="zh">
- <head>
- <meta charset="UTF-8" />
- <style type="text/css">
- .container{
- width: 400px;
- height: 40px;
- border: 2px solid #333333;
- padding: 10px;
- }
- .box{
- box-sizing:border-box;
- -moz-box-sizing:border-box; /* Firefox */
- -webkit-box-sizing:border-box; /* Safari */
- width:50%;
- border:2px solid red;
- float:left;
- }
- .container1{
- width: 400px;
- height:40px;
- padding: 10px;
- background: #ccc;
- border: 2px solid #333333;
- }
- .box1{
- width:50%;
- border:2px solid red;
- float:left;
- }
- </style>
- </head>
- <body>
- <div class="container1">
- <div class="box">这个 div 占据左半部分.</div>
- <div class="box">这个 div 占据右半部分.</div>
- </div>
- <br />
- <div class="container1">
- <div class="box1">这个 div 占据左半部分.</div>
- <div class="box1">这个 div 占据右半部分.</div>
- </div>
- </body>
- </html>
语法: box-sizing: content-box|border-box|inherit;21, 模糊遮罩效率, 模糊滤镜效果
css 代码
- -webkit-filter: blur(3px);
- -moz-filter: blur(3px);
- -o-filter: blur(3px);
- -ms-filter: blur(3px);
- filter: blur(3px);
22, 渐变效果
默认渐变是从上往下代码如下:
css 代码
- background:#ed4a60;
- background: -webkit-linear-gradient(#ed5a5e, #ed3a61);
- background: -o-linear-gradient(#ed5a5e, #ed3a61);
- background: -moz-linear-gradient(#ed5a5e, #ed3a61);
- background: linear-gradient(#ed5a5e, #ed3a61);
前面加一个参数, right,left,bottom,top 等, 就可以指定渐变方向:
css 代码
- background:-moz-linear-gradient(left,#ace,#f96);/*Mozilla*/
- background:-webkit-gradient(linear,0 50%,100% 50%,from(#ace),to(#f96));/*Old gradient for webkit*/
- background:-webkit-linear-gradient(left,#ace,#f96);/*new gradient for Webkit*/
- background:-o-linear-gradient(left,#ace,#f96); /*Opera11*/
还可以从左上角开始渐变 left top,right top(右上角)以此类推, 代码如下:
css 代码
- background: -moz-linear-gradient(left top, #ace, #f96);
- background: -webkit-linear-gradient(left top, #ace, #f96);
- background: -o-linear-gradient(left top, #ace, #f96);
另外还可以指定渐变角度, 这个角度是一个由水平线与渐变线产生的的角度, 逆时针方向. 因此, 使用 0deg 将产生一个左到右横向梯度, 而 90 度将创建一个从底部到顶部的垂直渐变.
代码如下:
css 代码
- background: -moz-linear-gradient(<angle>, #ace, #f96);
- background: -webkit-gradient(<type>,<angle>, from(#ace), to(#f96));// 老的写法
- background: -webkit-linear-gradient(<angle>, #ace, #f96);
- background: -o-linear-gradient(<angle>, #ace, #f96);
- .deg45 {
- background: -moz-linear-gradient(45deg, #ace, #f96);
- background: -webkit-gradient(linear,0 100%,100% 0%,from(#ace),to(#f96));
- background: -webkit-linear-gradient(45deg, #ace, #f96);
- background: -o-linear-gradient(45deg, #ace, #f96);
- }
来源: http://www.qdfuns.com/article/47654/f26eaa6148a3de8e8055bb6327b82055.html