分享web开发知识

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

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

记录不常用的css效果

发布时间:2023-09-06 02:10责任编辑:蔡小小关键词:暂无标签

1.清除浮动:

.clearfloat:after{display:block;clear:both;content:"";visibility:hidden;height:0}.clearfloat{zoom:1;}


2.设置背景透明,字体不透明:

background:rgba(221,172,106,0.6) none repeat scroll !important; filter:Alpha(opacity=60)


3.三角形箭头

/*向上箭头,类似A,只有三个边,不能指定上边框*/.arrow-up {width: 0px; height: 0px; border-left: 30px solid transparent; border-right: 30px solid transparent; border-bottom: 30px solid yellow; /*以下属性可以是IE5兼容*/ font-size: 0px; line-height: 0px; } /*向下箭头 ,类似 V*/.arrow-down {width: 0px; height: 0px; border-left: 30px solid transparent; border-right: 30px solid transparent; border-top: 30px solid blue; font-size: 0px; line-height: 0px; } /*向左的箭头:只有三个边:上,下,右。而<|总体来看,向左三角形的高=上+下边框的长度。宽=右边框的长度*/div.arrow-left {width: 0px; height: 0px; border-bottom: 30px solid transparent; border-top: 30px solid transparent; border-right: 40px solid green; font-size: 0px; line-height: 0px; } /*向右的箭头:只有三个边:上,下,左。而|>总体来看,向右三角形的高=上+下边框的长度。宽=左边框的长度*/div.arrow-right {width: 0px; height: 0px; border-top: 30px solid transparent; border-bottom: 30px solid transparent; border-left: 60px solid black; font-size: 0px; line-height: 0px; }


4.图片垂直居中

4.1外部div的css:dvi{ width:100%; height:100%; line-height:100%; text-align:center; }div img{ vertical-align: middle; }4.2div{border:1px #ddd solid;width:208px;height:148px;overflow:hidden;text-align:center;display:table;float:left;margin:50px;position:relative;}div span{display:table-cell;vertical-align:middle;}div span img{border:1px #ddd solid;margin:0 auto;max-width:200px;max-height:140px;}


5.字与字之间的间隔

.div{ letter-spacing:2px; }


6.textarea禁止拉伸

textarea{ resize:none;}


7.首行缩进

p{ text-indent:0; }


8.
超过一行用省略号

p{ width:1000px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }


超过两行用省略号

p{ ????width:100%; ???word-break: break-all; ???text-overflow: ellipsis; ???display: -webkit-box; /** 对象作为伸缩盒子模型显示 **/ ???-webkit-box-orient: vertical; /** 设置或检索伸缩盒对象的子元素的排列方式 **/ ???-webkit-line-clamp: 2; /** 显示的行数 **/ ???overflow: hidden; }


9.ios系统中按钮样式清除:

.btn{ -webkit-appearance : none ; }

11.英文字母大小写

text-transform:capitalize; //首字母大写uppercase; //全大写lowercase; //全小写

12.table外边框颜色

table{  width: 100%;  margin-top: 40px;  border-color:#eeeeee;  border: solid thin #eeeeee;}

13.图片变灰

.gray {   -webkit-filter: grayscale(100%);  -moz-filter: grayscale(100%);  -ms-filter: grayscale(100%);  -o-filter: grayscale(100%);  filter: grayscale(100%);  filter: gray;}

14.数字太长 不会自动换行怎么办

p{ ???word-break:break-all;}

15.placeholder字体颜色

input::-webkit-input-placeholder {  color: #333;}

16.css3渐变

transition-duration: 0.5s;-webkit-transition-duration: 0.5s;-ms-transition-duration: 0.5s;-o-transition-duration: 0.5s;transition-property: opacity;-webkit-transition-property: opacity;-ms-transition-property: opacity;-o-transition-property: opacity;

记录不常用的css效果

原文地址:https://www.cnblogs.com/wylj/p/9473624.html

知识推荐

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