谈谈一些有趣的CSS题目,左边竖条的实现方法
分类:前端技术

有趣的CSS标题(1): 右边竖条的落到实处情势

2016/09/29 · CSS · CSS

本文作者: 伯乐在线 - chokcoco 。未经作者许可,制止转发!
应接参预伯乐在线 专栏撰稿者。

开本类别,研讨一些神乎其神的 CSS 标题,抛开实用性来说,一些标题为了扩充一下缓和难点的笔触,其他,涉及一些便于忽视的 CSS 细节。

解题不思量包容性,标题驰骋驰骋,想到什么说哪些,假若解题中有您以为到生僻的 CSS 属性,赶紧去补习一下吗。

不断更新,不断更新,不断更新,首要的事情说壹次。

持极度汇总在作者的 Github 。

借使大家的单标签是二个 div:

开本种类,探究一些风趣的 CSS 标题,抛开实用性来说,一些主题素材为了推广一下消除难题的思绪,别的,涉及部分轻松忽视的 CSS 细节。

主题材料1、上边那几个图片,只利用二个标签,能够有微微种达成格局:

图片 1

假设大家的单标签是八个 div:

XHTML

<div></div>

1
<div></div>

概念如下通用CSS

CSS

div{ position:relative; width:200px; height:60px; background:#ddd; }

1
2
3
4
5
6
div{
    position:relative;
    width:200px;
    height:60px;
    background:#ddd;
}

  图片 2

解题不考虑包容性,标题南征北战,想到如何说什么样,借使解题中有你觉获得到生僻的 CSS 属性,赶紧去补习一下呢。

 

不断更新,不断更新,不断更新,主要的作业说三遍。

法一:border

本条理应是最最最轻易想到的了

CSS

div{ border-left:5px solid deeppink; }

1
2
3
div{
    border-left:5px solid deeppink;
}

  定义如下通用CSS:

具备标题汇总在本人的 Github 。

  1. div{ 
  2.  
  3.   position: class="value">relative; 
  4.  
  5.   width: class="value">200px; 
  6.  
  7.   height: class="value">60px; 
  8.  
  9.   background: class="value">#ddd; 
  10.  
  11.   } 

 

法二:使用伪元素

二个标签,算上 before 与 after 伪成分,其实到头来有四个标签,那也是不菲单标签作图的底子,本题中,使用伪成分能够随性所欲完结。

CSS

div::after{ content:""; width:5px; height:60px; position:absolute; top:0; left:0; background:deeppink; }

1
2
3
4
5
6
7
8
9
div::after{
    content:"";
    width:5px;
    height:60px;
    position:absolute;
    top:0;
    left:0;
    background:deeppink;
}

  法一:border

标题1、上边那几个图形,只行使多少个标签,可以有多少种完成情势:

图片 3

倘诺大家的单标签是二个 div:

<div></div>

概念如下通用CSS

div{
    position:relative;
    width:200px;
    height:60px;
    background:#ddd;
}

  那些理应是最最最轻松想到的了

 

法三:外 box-shadow

盒阴影 box-shadow 大部分人都只是用了变化阴影,其实阴影可以有多种阴影,阴影无法不虚化,这就需求去打听一下 box-shaodw 的每三个参数具体成效。使用 box-shaodw 解题

CSS

div{ box-shadow:-5px 0px 0 0 deeppink; }

1
2
3
div{
    box-shadow:-5px 0px 0 0 deeppink;
}
  1. div{ 
  2.  
  3.  border-left:5px  class="value">solid deeppink; 
  4.  
  5.  } 

法一:border

本条相应是最最最轻易想到的了

div{
    border-left:5px solid deeppink;
}

  法二:使用伪元素

 

法四:内 box-shadow

盒阴影还会有二个参数 inset ,用于安装内阴影,也能够做到:

谈谈一些有趣的CSS题目,左边竖条的实现方法。CSS

div{ box-shadow:inset 5px 0px 0 0 deeppink; }

1
2
3
div{
    box-shadow:inset 5px 0px 0 0 deeppink;
}

  贰个标签,算上 before 与 after 伪元素,其实到头来有八个标签,那也是许多单标签作图的根基,本题中,使用伪成分能够大肆完结。

法二:使用伪成分

三个标签,算上 before 与 after 伪成分,其实到头来有八个标签,那也是成都百货上千单标签作图的底子,本题中,使用伪成分能够随便达成。

div::after{
    content:"";
    width:5px;
    height:60px;
    position:absolute;
    top:0;
    left:0;
    background:deeppink;
}

  1. div::after{ 
  2.  
  3.  content: class="string">""; 
  4.  
  5.  width: class="value">5px; 
  6.  
  7.  height: class="value">60px; 
  8.  
  9.  position: class="value">absolute; 
  10.  
  11.  top:0; 
  12.  
  13.  left:0; 
  14.  
  15.  background:deeppink; 
  16.  
  17.  } 

 

法五:drop-shadow

drop-shadow 是 CSS3 新扩充滤镜 filter 中的个中多少个滤镜,也足以调换阴影,可是它的数值参数个数独有3 个,比之 box-shadow 少三个。

CSS

div{ filter:drop-shadow(-5px 0 0 deeppink); }

1
2
3
div{
    filter:drop-shadow(-5px 0 0 deeppink);
}

  法三:外 box-shadow

法三:外 box-shadow

盒阴影 box-shadow 大多数人都只是用了变通阴影,其实阴影可以有多种阴影、单侧阴影、阴影不得以不虚化,那就必要去询问一下 box-shaodw 的每三个参数具体效率。使用 box-shaodw 解题

div{
    box-shadow:-5px 0px 0 0 deeppink;
}

  盒阴影 box-shadow 超越四分之三个人都只是用了变化阴影,其实阴影能够有多种阴影,阴影不得以不虚化,那就要求去打听一下 box-shaodw 的每一个参数具体效果。使用 box-shaodw 解题:

 

法六:渐变 linearGradient

灵活使用 CSS3 的渐变能够做到大气想不到的图纸,CSS3 的渐变分为线性渐变和通往渐变,本题使用线性渐变,能够任性解题:

CSS

div{ background-image:linear-gradient(90deg, deeppink 0px, deeppink 5px, transparent 5px); }

1
2
3
div{
    background-image:linear-gradient(90deg, deeppink 0px, deeppink 5px, transparent 5px);
}
  1. div{ 
  2.  
  3.  box-shadow:-5px  class="value">0px  class="value">0 0 deeppink; 
  4.  
  5.  } 

法四:内 box-shadow

盒阴影还应该有二个参数 inset ,用于安装内阴影,也能够做到:

div{
    box-shadow:inset 5px 0px 0 0 deeppink;
}

  法四:内 box-shadow

 

法七:轮廓 outline

本条用的可比少,outline (轮廓)是绘制于成分左近的一条线,位于边框边缘的外面,可起到优越因素的法力。这一个艺术算是下下之选。

CSS

div{ height:50px; outline:5px solid deeppink; } div{ position:absolute; content:""; top:-5px; bottom:-5px; right:-5px; left:0; background:#ddd; }

1
2
3
4
5
6
7
8
9
10
11
12
13
div{
    height:50px;
    outline:5px solid deeppink;
}
div{
    position:absolute;
    content:"";
    top:-5px;
    bottom:-5px;
    right:-5px;
    left:0;
    background:#ddd;
}

 

  盒阴影还会有叁个参数 inset ,用于安装内阴影,也能够做到:

法五:drop-shadow

drop-shadow 是 CSS3 新扩充滤镜 filter 中的此中一个滤镜,也能够扭转阴影,可是它的数值参数个数独有3 个,比之 box-shadow 少三个。

div{
    filter:drop-shadow(-5px 0 0 deeppink);
}

法八、滚动条

其一艺术由 大火柴的黄褐理想 提供,通过更改滚动条样式完结:

CSS

div{ width:205px; background:deeppink; overflow-y:scroll; } div::-webkit-scrollbar{ width: 200px; background-color:#ddd; }

1
2
3
4
5
6
7
8
9
div{
    width:205px;
    background:deeppink;
    overflow-y:scroll;
}
div::-webkit-scrollbar{
    width: 200px;
    background-color:#ddd;
}

屏弃实用性,仅仅是模拟出那几个样式的话,那些艺术确实让人面目一新。

 

上述便是想到的 8 种情势,不消亡有没悟出的,希望有其余的办法能够在评价中建议,具体 8 种完结能够戳这里看看:

codepen-单标签侧面竖条的兑现格局

See the Pen 单标签侧面竖条的落到实处方式 by Chokcoco (@Chokcoco) on CodePen.

怀有标题汇总在本人的 Github ,发到博客希望收获越多的交换。

到此本文停止,如若还宛怎样难点依然提出,能够多多调换,原创散文,文笔有限,学浅才疏,文中若有不正之处,万望告知。

打赏补助本人写出越来越多好文章,多谢!

打赏作者

  1. div{ 
  2.  
  3.   box-shadow:inset  class="value">5px 0px  class="value">0 0 deeppink; 
  4.  
  5.   } 

 

打赏支持作者写出越多好随笔,多谢!

任选少年老成种支付办法

图片 4 图片 5

1 赞 14 收藏 评论

  法五:drop-shadow

法六:渐变 linearGradient

灵活使用 CSS3 的渐变能够做到大气想不到的图纸,CSS3 的渐变简单来讲分为线性渐变和向阳渐变,本题使用线性渐变,能够狂妄解题:

div{
    background-image:linear-gradient(90deg, deeppink 0px, deeppink 5px, transparent 5px);
}

style="font-size: 14px; font-family: verdana, geneva;">其实,CSS3 渐变远不独有线性渐变和向阳渐变,细分下来,还应该有重复线性渐变(repeating-linear-gradient)和重复径向渐变(repeating-radial-gradient)以至曾经被最新版本 Chrome 辅助的圆锥渐变(conical-gradient),感兴趣能够自动去读书一下。

 

至于我:chokcoco

图片 6

经不住光阴似箭,逃可是此间少年。 个人主页 · 作者的稿子 · 63 ·    

图片 7

  drop-shadow 是 CSS3 新添滤镜 filter 中的当中二个滤镜,也能够扭转阴影,不过它的数值参数个数唯有 3 个,比之 box-shadow 少三个。

法七:轮廓 outline

以此用的可比少,outline (概略)是绘制于成分周边的一条线,位于边框边缘的外侧,可起到优秀因素的效率。这几个艺术算是下下之选。

div{
    height:50px;
    outline:5px solid deeppink;
}
div::after{
    position:absolute;
    content:"";
    top:-5px;
    bottom:-5px;
    right:-5px;
    left:0;
    background:#ddd;
}

 

  1. div{ 
  2.  
  3.  filter:drop-shadow(-5px  class="value">0 0 deeppink); 
  4.  
  5.  } 

法八、滚动条

那一个法子由 温火柴的墨蓝理想 提供,通过改变滚动条样式实现:

div{
    width:205px;
    background:deeppink;
    overflow-y:scroll;
}
div::-webkit-scrollbar{
    width: 200px;
    background-color:#ddd;
}

撇开实用性,仅仅是模拟出那些样式的话,这些法子真的让人日前生机勃勃亮。

  

上述正是想到的 8 种办法,不免除有没悟出的,希望有其余的秘籍能够在言三语四中建议,具体 8 种完结能够戳这里拜候:

codepen-单标签左侧竖条的贯彻方式

 

具有标题汇总在自个儿的 Github ,发到博客希望得到更加多的调换。

到此本文结束,尽管还宛怎么着疑难依然建议,能够多多沟通,原创小说,文笔有限,吴下阿蒙,文中若有不正之处,万望告知。

  法六:渐变 linearGradient

  灵活利用 CSS3 的渐变能够完成大气想不到的图样,CSS3 的渐变分为线性渐变和通往渐变,本题使用线性渐变,能够轻便解题:

  1. div{ 
  2.  
  3. background-image:linear-gradient( class="value">90deg, deeppink  class="value">0px, deeppink 5px,  class="value">transparent  class="value">5px); 
  4.  

  法七:轮廓 outline

  那几个用的可比少,outline (轮廓)是绘制于元素相近的一条线,位于边框边缘的外围,可起到非凡因素的作用。那一个艺术算是下下之选。

  1. div{ 
  2.  
  3.  height: class="value">50px; 
  4.  
  5.  outline:5px  class="value">solid deeppink; 
  6.  
  7.  } 
  8.  
  9.  div{ 
  10.  
  11.  position: class="value">absolute; 
  12.  
  13.  content: class="string">""; 
  14.  
  15.  top:-5px; 
  16.  
  17.  bottom:-5px; 
  18.  
  19.  right:-5px; 
  20.  
  21.  left:0; 
  22.  
  23.  background: class="value">#ddd; 
  24.  
  25.  } 

  法八: 滚动条

  这几个办法由 温火柴的青色理想 提供,通过转移滚动条样式达成:

  1. div{ 
  2.  
  3.   width: class="value">205px; 
  4.  
  5.   background:deeppink; 
  6.  
  7.   overflow-y:scroll; 
  8.  
  9.   } 
  10.  
  11.   div::-webkit-scrollbar{ 
  12.  
  13.   width:  class="value">200px; 
  14.  
  15.   background-color: class="value">#ddd; 
  16.  
  17.   } 

  抛开实用性,仅仅是模拟出这么些样式的话,那么些方式真的让人日前意气风发亮。

初藳:爱思财富网

由爱创课堂--专门的学业的前端HTML5培养机构收拾发表

web前端HTML5帮助咨询2189877100,招待来扰!!!

 

本文由pc28.am发布于前端技术,转载请注明出处:谈谈一些有趣的CSS题目,左边竖条的实现方法

上一篇:送你一张Web性能优化地图,实用新特性简介 下一篇:没有了
猜你喜欢
热门排行
精彩图文