常用css3技巧 实用css3代码
禁止a标签点击高亮,这些都是非官方属性，但实用性超强
html,body{
-webkit-touch-callout: none; //禁止或显示系统默认菜单
-webkit-user-select: none; //禁止长按复制选择
-webkit-tap-highlight-color: rgba(0,0,0,0);//禁止触摸a标签高亮 这个特别实用
}2. 行级，块级元素居中显示
以前我们要将文字居中显示的做法是 text-align: center; line-height:x;
如果父级元素的高度是未知的呢 line-height久不好确定了，下面三行代码为你搞定 应为不再考虑父级元素的宽度了
section{ //父元素
display: -webkit-box;
-webkit-box-align: center;
-webkit-box-pack: center;
}
3.禁止换行 多余省略号
html结构:
<div class='word'>
看！我只显示一行，多余的用省略号表示哟
</div>
css:
.world{
display:block; //如果是块儿级元素可以不用加
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
4.禁止换行高能升级
如果需求是让文字显示两行多余用省略号显示呢？
来个大招
.world{
font-size:2.4rem;
line-height:130%;
height: 7.0rem;
line-height: 130%;
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 2; //显示的行数
-webkit-box-orient: vertical;
}
5.用百分比控制line-height;
移动端应尽量少使用px，用百分比控制更精确
line－height:100%;//两行文字之间无空隙
使用：当拿到设计PSD时 我们先看字号是多少，比如24px; 文字的间距，比如10px; 那么line-height=100%+(10/24)*100%; 这样的行间距是最精确的并且响应各种设备
6.使用flex取代float
html 结构
<ul>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
css代码
ul{
display: -webkit-box;
display: box;
display: -webkit-flex;
display: flex;
display: -webkit-flex-box;
display:flex-box;
}
li{
-webkt-flex:1;
flex:1;
-webkit-box-flex:1;
box-flex:1;
}
7.文字上划斜线
我们知道在文字上划横线是 text-decoration: line-through;但是默认没有划斜线的属性，这个常用于电商网站比如将原价用斜线划掉
这里我们用到before，代码
.diagonal:before{
position: absolute;
content: "";
left: 0;
top: 42%;
right: -10%;
border-top: 2px solid;
border-color: #333;
transform: rotate(8deg);
-webkit-transform: rotate(8deg);
}
8.字体大小使用vw
字号的使用变迁 px->em->rem->vw
前三种都不能到达响应的效果
vw是根据设备屏幕的百分比设置
比如
.a{
font-size:10vw;//大小为屏幕宽度的百分之十 当然很少有设这么大的字
}
因为vw设置的字体大小是根据屏幕大小改变而改变 所以在大屏幕上显示会变大 根据可根据 需求使用
9.画1px的细线
html:
<div class='border1px'></div>
css代码
.border1px{ position: relative;}
.border1px:after{
content:"";
position: absolute;
bottom:0px;
left:0px;
right:0px;
border-bottom:1px solid red;
border-left:1px solid red;
-webkit-transform:scaleY(.5);
-webkit-transform-origin:0 0;
}
10、CSS3 圆角
使用 CSS3 border-radius 属性，你可以给任何元素制作 "圆角"。
border-radius所有四个边角 border-*-*-radius 属性的缩写
border-top-left-radius定义了左上角的弧度
border-top-right-radius定义了右上角的弧度
border-bottom-right-radius定义了右下角的弧度
border-bottom-left-radius定义了左下角的弧度
如果你在 border-radius 属性中只指定一个值，那么将生成 4 个 圆角。
但是，如果你要在四个角上一一指定，可以使用以下规则：
一个值： 四个圆角值相同
两个值: 第一个值为左上角与右下角，第二个值为右上角与左下角
三个值: 第一个值为左上角, 第二个值为右上角和左下角，第三个值为右下角
四个值: 第一个值为左上角，第二个值为右上角，第三个值为右下角，第四个值为左下角。
如下：
#指定背景颜色的元素圆角：
#rcorners1 {
border-radius: 25px;
background: #8AC007;
padding: 20px;
width: 200px;
height: 150px;
}
#指定边框的元素圆角:
#rcorners2 {
border-radius: 25px;
border: 2px solid #8AC007;
padding: 20px;
width: 200px;
height: 150px;
}
#指定背景图片的元素圆角:
#rcorners3 {
border-radius: 25px;
background: url(paper.gif);
background-position: left top;
background-repeat: repeat;
padding: 20px;
width: 200px;
height: 150px;
}
