Css3使用技巧

2019-09-13 郑州网站建设  

border-radius::afterattrcontentbox-sizinglinear-gradientradial-gradientbox-shadow

 

border-radius

 

相信这个属性,写过css的同学都知道,用来产生圆角,比如画一个圆形:

 

div {

    width:100px;

    height:100px;

    background:red;

    border-radius:100px; //border-radius:100%;

}

 

然后我们来看看它的语法:border-radius: [左上] [右上] [右下] [左下],于是我们来画一个半圆

 

div {

    width: 100px;

    height: 50px;

    background: red;

    border-radius: 50px 50px 0 0;

}

 

那如果要画一个椭圆该如何办呢?你会发现上面的语法貌似做不到了,其实border-radius的值还有一种语法: x半径/y半径:

 

div {

    width: 100px;

    height: 50px;

    background: red;

    border-radius: 50px/25px;

}

 

如果我要画半个椭圆,又要咋办呢?

 

div {

    width: 100px;

    height: 50px;

    background: red;

    border-radius: 100% 0 0 100% /50%;

}

 

::after

 

这里拿个简单的例子来看,我们要画一个放大镜,如下图:

 

 

 

分析一下,这个放大镜可以由两个div组成,一个是黑色的圆环,一个是黑色把手(旋转45度)。所以我们就需要用两个div来实现吗?答案是NO,一个div也是可以的,我们可以借助::after来添加一个元素。同理如果需要三个div,我们还可以使用::before再添加一个元素。下面看一下代码:

 

div {

    width: 50px;

    height: 50px;

    border-radius: 50%;

    border: 5px solid #333;

    position: relative;

}

div::after {

    content: '';

    display: block;

    width: 8px;

    height: 60px;

    border-radius: 5px;

    background: #333;

    position: absolute;

    right: -22px;

    top: 38px;

    transform: rotate(-45deg);

}

 

attrcontent

 


河南郑州做网站首选天择文化,我们专注郑州网站建设网站设计网站制作与开发,是中原地区专业的郑州网络公司,多年来我们一直努力,服务客户数百家,欢迎您的咨询。
本文链接:郑州网络公司http://tzchb.ieyo.com/dede/2126.html转载请标明出处,谢谢合作!
标签:
  • 实例
  • CSS3
  • 本文
  • ü
  • 提到
  • 经典