常用css3技巧 实用css3代码

查看付费资源请通过右侧购买区域进行购买!

常用css3技巧 实用css3代码

  1. 禁止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;

}

转载请说明出处
仿站网 » 常用css3技巧 实用css3代码

发表评论

您需要后才能发表评论

仿站网专注帝国cms仿站,Zblog仿站,Wordpress仿站服务,专业+效率+售后保障

关于我们 联系客服
 
QQ在线咨询
客服热线
139-3511-2134