码迷,mamicode.com
首页 > Web开发 > 详细

常见问题2:css效果综合整理

时间:2017-11-24 15:14:40      阅读:170      评论:0      收藏:0      [点我收藏+]

标签:问题   order   常见   flow   bsp   .com   鼠标   button   访问   

1、---文本框提示文字颜色--placeholder属性

<input type="text" placeholder="请输入提示文字"  />
::-webkit-input-placeholder { color:#666; }
::-moz-placeholder { color:#666; } /* firefox 19+ */
:-ms-input-placeholder { color:#666; } /* ie */
input:-moz-placeholder { color:#666; }

扩展参考链接:http://www.html5tricks.com/html5-input-css.html


2、圆角,文字阴影,盒子阴影

input,select,textarea{
border-radius:3px; 
-webkit-border-radius:3px; 
-moz-border-radius:3px;
text-shadow: 0 1px 1px rgba(0,0,0,.3);
-webkit-border-radius: .5em; 
-moz-border-radius: .5em;
border-radius: .5em;
-webkit-box-shadow: 0 1px 2px rgba(0,0,0,.2);
-moz-box-shadow: 0 1px 2px rgba(0,0,0,.2);
box-shadow: 0 1px 2px rgba(0,0,0,.2);
}

 3、button按钮

display: inline-block;
outline: none;    /*框设置无*/
cursor: pointer;  /*鼠标经过时手形*/
text-align: center;  /*文字居中*/
text-decoration: none; /*无下划线*/

4、a标签

a,a:hover,a:focus{text-decoration:none}

a:link{/*未访问*/} 
a:visited {/*已访问*/}
a:hover {/*悬浮*/}
a:active {/*活动链接*/}

5、ul,li设置无样式(去原点等前缀)

ul, li { list-style:none;}

6、超出隐藏加省略号...

div{overflow: hidden; white-space: nowrap; text-overflow: ellipsis;}

 7、超出隐藏加滚动

    max-height: 320px;
    overflow: auto;
    overflow-x: hidden;

 

常见问题2:css效果综合整理

标签:问题   order   常见   flow   bsp   .com   鼠标   button   访问   

原文地址:http://www.cnblogs.com/wuss/p/7889068.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!