分享web开发知识

注册/登录|最近发布|今日推荐

主页 IT知识网页技术软件开发前端开发代码编程运营维护技术分享教程案例
当前位置:首页 > 教程案例

CSS样式

发布时间:2023-09-06 02:01责任编辑:郭大石关键词:CSS

透明度

.lucency{ ???????????filter:alpha(opacity=80); ???????????opacity:0.3; ???????}

背景透明度

.lucencyBg{ ????line-height: 1.5 !important;">transparent;}

1. css hack

1 .pad{2 ????padding:17px 0 0 17px; ?/* 普通写法 */ 3 ????*padding:17px 0 0 17px; /* *为IE7 ??*+html css()为IE7 */4 ????_padding:17px 0 0 17px; ?/* ?_为IE6 ?*html css()为IE6 */5 }

2. css 设置圆角

1 .radius{2 ????-moz-border-radius: 100px;3 ????-webkit-border-radius: 100px;4 ????border-radius:100px;5 }

3. css  盒子阴影   (x,y,阴影模糊度,阴影颜色)

1 .shadow{2 ????-moz-box-shadow: 3px 3px 4px #fff;3 ????-webkit-box-shadow: 3px 3px 4px #fff;4 ????box-shadow: 3px 3px 4px #fff; 5 ????filter: progid:DXImageTransform.Microsoft.dropshadow(OffX=3px, OffY=3px, Color=‘#ffffff‘); ?/* 盒子阴影 IE6,IE7 */6 ????-ms-filter: "progid:DXImageTransform.Microsoft.dropshadow(OffX=3px, OffY=3px, Color=‘#ffffff‘)"; /* 盒子阴影 IE8 */7 }

4. css 透明度

1 .lucency{2 ????filter:alpha(opacity=80);3 ????opacity:0.8; ???4 }

5. css 文本超出范围省略号代替 ( 块级元素,强制单行)

1 .over{2 ????overflow:hidden;3 ????white-space:nowrap;4 ????text-overflow:ellipsis;5 }

6. css 设置背景透明

1 .lucencyBg{2 ?????line-height: 1.5 !important;">transparent;3 }

7. css 文字中间划横线效果

1 .txtDec{2 ????text-decoration:line-through;3 }

8. css 背景图片定位  (通常为负数)

1 .posBg{2 ????background-position:x y;3 }

9.  css 下拉框去掉三角形

1 .selectStyle{2 ????appearance:none;3 ????-moz-appearance:none;4 ????-webkit-appearance:none;5 }

10. css 输入框没有选中效果

1 .inp{2 ????outline:none;3 }

11. css 禁止页面图片拖曳 ( body )

1 body{2 ????oncontextmenu="return false" ondragstart="return false" ?tstart="return false"3 }

12. css 防止点击出现透明背景问题

1 .colorBg{2 ????-webkit-tap-highlight-color:rgba(0,0,0,0);3 }

13. css 未知宽度水平居中 相对浮动

1 .unknow_width_center1 {position:relative; left:50%; float:left;}2 .unknow_width_center1 li {position:relative; right:50%; z-index:2; float:left;}

14. css 容器内完全居中(垂直 & 水平)

1 .parent{ position:relative; width:300px; height:300px; margin:0 auto;}2 .child{ position:absolute; left:0; right:0; bottom:0; top:0; width:50px; height:50px; overflow:auto; margin:auto;}

15. css 容器内文字垂直居中

1 .outer { display:table; width:578px; overflow:hidden;}2 .middle {display:table-cell; vertical-align:middle;}

1 /*下面的CSS是针对IE7,IE6*/2 <!--[if lte IE 7]>3 <style>4 .outer{position:relative;}5 .middle{position: absolute; top: 50%;}6 .inner{position: relative; top:-50%}7 </style> 8 <![endif]-->

16. css 输入框/输入区域不可随意拖动大小

1 .textarea{ resize:none; }

17. css radio / checkbox 选中样式设置

 1 input[type=radio]{ 2 ????-webkit-appearance: none; 3 ????appearance: none; 4 ????width:15px; 5 ????height:15px; 6 ????margin-top:-2px; 7 ????margin-left:3px; 8 ????cursor: pointer; 9 ????vertical-align:middle;10 ????-webkit-border-radius:15px;11 ????-moz-border-radius:15px;12 ????border-radius:15px;13 ????border:1px solid #e29452;14 ????">#fff;15 }
16 input[type=radio]:checked::after {17 ????content: url(../images/check.png);18 ????margin-left:1px;19 }

CSS样式

原文地址:https://www.cnblogs.com/ZJGG/p/9234875.html

知识推荐

我的编程学习网——分享web前端后端开发技术知识。 垃圾信息处理邮箱 tousu563@163.com 网站地图
icp备案号 闽ICP备2023006418号-8 不良信息举报平台 互联网安全管理备案 Copyright 2023 www.wodecom.cn All Rights Reserved