整合营销服务商

电脑端+手机端+微信端=数据同步管理

免费咨询热线:

4种非常实用的CSS代码段,你都学会了吗?

击右上方红色按钮关注“web秀”,让你真正秀起来

文字加载...动画

html

正在加载中<dot>...</dot>

css

dot{ 
 display: inline-block; 
 height: 1em; 
 line-height: 1; 
 text-align: left; 
 vertical-align: -.25em; 
 overflow: hidden; 
} 
dot::before{ 
 display: block; 
 content: '...\\A..\\A.'; 
 white-space: pre-wrap; 
 animation: dot 2s infinite step-start both; 
} 
@keyframes dot{ 
 33% { 
 transform: translateY(-2em); 
 } 
 66% { 
 transform: translateY(-1em); 
 } 
}

如果你看上图代码没有看懂,请看下图,我注释掉一行代码,你就明白了。原来是dot元素,沿着Y轴在循环位移,隐藏掉就让你看到了加载的动画效果。

border 实现边框

当你需要这样一个上传文件,按钮时,你考虑的是找设计弄个图片,还是自己写一个???

其实CSS写,也很简单的。

<a href="javascript:;" class="upload" title="继续上传">添加图片</a>
.upload{ 
 position: relative; 
 display: inline-block; 
 width: 76px; 
 height: 76px; 
 color: #ccc; 
 border: 2px dashed; /*边框虚线*/ 
 text-indent: -12em; /*使其文字看不到*/ 
 transition: color .25s; /*hover事件:颜色渐变动画*/ 
 overflow: hidden; 
 margin: 50px 100px; 
} 
/*用before/after伪类做 + 号样式*/ 
.upload:before, .upload:after{ 
 content: ''; 
 position: absolute; 
 top: 50%; 
 left: 50%; 
} 
.upload:hover{ 
 color: #34538b; 
} 
.upload::before{ 
 width: 20px; 
 border-top: 4px solid; 
 margin: -2px 0 0 -10px; 
} 
.upload::after{ 
 height: 20px; 
 border-left: 4px solid; 
 margin: -10px 0 0 -2px; 
}

不规则的投影 filter

当我们想给一个矩形或其他能用 border-radius 生成的形状加投影时,用 box-shadow 都可以解决,如下图:

但是,当元素添加了一些伪元素或半透明的装饰之后,box-shadow就有些 力不从心了,因为 border-radius 会无耻地忽视透明部分。这类情况包括下列几种情况:

1、半透明图像、背景图像、或者 border-image(比如老式的金质像框);

2、元素设置了点状、虚线或半透明的边框,但没有背景(或者当 background-clip 不是 border-box 时);

3、对话气泡,它的小尾巴通常是用伪元素生成的;

4、几乎所有的折角效果

5、通过 clip-path 生成的形状。

下面来看看这个示例: html代码

<div class="speech">不规则的投影</div>

css样式

div { 
 position: relative; 
 display: inline-flex; 
 flex-direction: column; 
 justify-content: center; 
 vertical-align: bottom; 
 box-sizing: border-box; 
 width: 8em; 
 padding: .5em; 
 height: 5em; 
 margin: .6em; 
 background: #0cc071; 
 color: #fff; 
 /*box-shadow: .1em .1em .3em rgba(0,0,0,.5); 此时是伪类是没有阴影的*/ 
 -webkit-filter: drop-shadow(.2em .2em .2em rgba(0,0,0,.5)); 
 filter: drop-shadow(.2em .2em .2em rgba(0,0,0,.5)); 
} 
 
.speech { 
 border-radius: .3em; 
} 
.speech::before { 
 content: ''; 
 position: absolute; 
 top: 1em; 
 right: -.7em; 
 width: 0; 
 height: 0; 
 border: 1em solid transparent; 
 border-left-color: #0cc071; 
 border-right-width: 0; 
}

从上图可以看出box-shadow搞不定的,drop-shadow给搞定了。这是为什么了?

可以很明显的看出区别,为什么会这样呢?在这里我用的是div标签,大家都知道,div标签是个块标签,说白了是个盒模型,指的是一块区域,box-shadow的属性只能添加到盒模型外面,因此内部的东西是不会添加上的,就变成上图的样子,中间还是白色部分。而drop-shadow就不一样了,他是把所有的非透明区域都做了阴影效果,就相当于一种真正的投影。

css 实现自适应的弹框

经常在网页中看到一些Dialog,例如有些网页点击登录注册时就会跳出一个弹框来显示登录注册页面,下面就使用 css 完成一个可以自适应,无论窗口的大小,始终能保持水平垂直居中的dialog。

<div class="c-pupup"> 
 <div class="dialog"> 
 <div class="content"> 
 我是内容 
 </div> 
 </div> 
</div>

css样式

.c-pupup{ 
 position: fixed; 
 top:0; 
 bottom: 0; 
 left: 0; 
 right: 0; 
 background: rgba(0,0,0,.5); 
 text-align: center; 
 white-space: nowrap; 
 z-index: 99; 
} 
.c-pupup:after{ 
 content: ''; 
 display: inline-block; 
 height: 100%; 
 vertical-align: middle; 
} 
.dialog{ 
 background-color: #fff; 
 display: inline-block; 
 vertical-align: middle; 
 border-radius: 6px; 
 text-align: left; 
 white-space: normal; 
 width: 400px; 
 height: 250px; 
}

总结

这些CSS都是非常实用的,有兴趣的可以收藏起来,没准以后能用上。然后drop-shadow就不用去纠结IE能不能用了,因为我们已经放弃它了。

喜欢小编或者觉得小编文章对你有帮助的,可以点击一波关注哦!


在前端开发中经常会用到很多的简易图形,例如三角形,箭头,圆形等。有很多人一开始会想着用小的图片实现,不过这样会增加页面请求次数,延缓页面加载效果。

在CSS中有个border属性,它完全可以达到制作各种简易图形的效果,今天我们就一起来看看吧。

文章中的代码都已经放在了github上,感兴趣的同学自取。

https://github.com/zhouxiongking/article-pages/blob/master/articles/border/border.html

CSS

border讲解

在制作各种简易图形之前,我们先来看看border属性的使用。

border是一个复合属性。

  • border-width表示边框宽度。

  • border-style表示边框样式,设置实线,虚线,点状等。

  • border-color表示边框颜色,还可以设置transparent,表示透明。

border又分为上下左右四个方向,每个方向都占据各自的空间,不会出现重叠的地方,尤其是在四个方向的边框都设置的情况下,在四个角处也不会出现重叠。

我们来看个最简单的例子,在四个方向上都设置边框,赋予不同的颜色。

图片1

通过上面的图片1可以看出,四个角处是分离,没有重合的。

梯形

首先我们来看看梯形的效果图。

梯形效果图

我们再来分析下梯形是如何实现的。

  • 因为我们完全是通过border设置,所以这个div的高度应该为0。

  • 梯形的左右两个腰,恰好如同border在角的衔接处,然后将两侧的border-style设置为transparent。

因此我们可以得到以下的CSS代码。

梯形的CSS代码

修改border-left和border-right的宽度值,可以改变梯形的形状。

三角形

三角形也分为上下左右四个方向,我们首先来看看总体的形状。

三角形

然后我们也来分析下如何实现这个效果,以下三角形为例。

  • 因为是呈现三角形的形状,刚好契合border在角落的衔接处,因此高度和宽度都应该为0。

  • 下三角形是上部有区域,所以要设置border-top。

  • border-left和border-right两个方向都要设置宽度,然后设置为透明即可。

因此得到以下的CSS代码,设置不同方向border的宽度,三角形的形状也会跟着变。

下三角形CSS代码

同理,只要掌握了其中一个方向的三角形原理,就会轻松写出其他方向三角形的CSS代码。

这里直接给出上三角形的CSS代码。

上三角形CSS代码

左三角形的CSS代码如下所示。

左三角形CSS代码

右三角形的CSS代码如下所示。

右三角形CSS代码

正方形-四种颜色

接下来我们看一种基本的只用border设计的形状。

图形

它的实现方式也很简单,只需要将width和height设置为0,然后将border四个方向的宽度设置成一样的即可。

得到的代码如下所示。

CSS代码

直角三角形

基于上述的实现,我们可以得到左下,左上,右上,右下四种三角形。

首先看看基本形状。

直角三角形

看到图形后,我们很容易发现,只要隐藏掉连接的两个方向的border,显示出另外两个方向的border,就可以得到直角三角形。

这里我们只展示出左上三角形的CSS代码。

左上直角三角形CSS代码

其他方向的直角三角形代码可类比得出,大家可以试一下。

六角星

首先我们看看六角星的形状。

六角星

看到这个图形,大家应该能想到可以由上下两个三角形构成,只要将上下两个三角形位置对应准确。

这里为了节省页面元素的空间,我们可以采用伪元素去实现。

  • 将页面显示元素设置为上三角形。

  • 利用:after伪元素设置下三角形。

  • 设置伪元素的position为absolute,调节right和top值。

通过上述分析,我们得到以下CSS代码。

六角星CSS代码

圆形

与border属性搭配使用的还有一个很常用的属性,那就是border-radius。

border-radius是专门设置圆角的,可以让90度角变为圆角。

我们首先看看最基本的圆形的样子。

圆形

其实我们只需要将border-radius属性设置为宽或者高的一半以上即可。代码如下所示。

圆形

同心圆

我们来看看同心圆的样子。

同心圆

同心圆只需要设置一个border边框,给border设置一个特殊的背景色,给div设置成白色背景即可。

同心圆CSS代码

半圆

我们来看看半圆的形状。

半圆

半圆的效果是如何实现的呢?

  • 首先元素自身高度设置为0,设定宽度值。

  • 设定上部和右部的border。

  • 设定左上角和右上角的border-radius值。

得到的代码如下所示。

上半圆

同理,下半圆,左半圆和右半圆修改对应的值就可以获得。

结束语

今天这篇文章主要通过border属性,画出了一系列简易的图形,这在实际中是很实用的,大家学会了吗?

ss的标签有很多,本篇文章为大家总结以下常用的一些标签以及简单说明这些标签的作用。

(1) css的文字属性标签

文字颜色: color: #ffffff;

文字样式: font-style: oblique;(偏斜体) italic;(斜体) normal;(正常)

字体大小:font-size:16px;

文字行高: line-height: 30px;

文字粗细: font-weight: bold;(粗体) lighter;(细体) normal;(正常)

文字修饰: text-decoration:line-through; (加删除线)overline;(加顶线)underline;(加下划线)none;(无修饰线)

对齐方式: text-align:right; (文字右对齐)left;(文字左对齐)center;(内部元素居中)justify;(文字分散对齐)

使用练习:我们随机书写一段文字,设置文字的颜色为红色,字体样式为斜体,字体大小为20px,行高为35px,字体加粗,加下划线,并是文字居中对齐;那么我们的代码就如下所示:

在网页中的显示效果就如下图所示:

(2)css背景样式

背景样式:background:#f00; (红色背景)background-image : url(/image/bg.gif); (背景图片)background-repeat : repeat;(重复排列-网页默认)background-repeat : no-repeat;(不重复排列)background-repeat : repeat-x; (在x轴重复排列)background-repeat : repeat-y; (在y轴重复排列)

(3)css边框样式

边框样式:border-top : 1px solid #f00; (上框线)border-bottom : 1px solid #f00; (下框线)border-left : 1px solid #f00; (左框线)border-right : 1px solid #f00; (右框线)border:1px solid #f00;(上下左右边框)

其他框线样式:solid(实线框)dotted(虚线框)double(双线框)groove(立体内凸框)ridge(立体浮雕框)inset(凹框)outset(凸框)

(4)css内边距以及外边距属性

内边距样式:padding-top:10px; (上边框留空白)padding-right:10px;(右边框留空白)padding-bottom:10px; (下边框留空白)padding-left:10px;(左边框留空白)

也可以简写成padding:10px 10px 10px 10px;(分别对应上右下左)padding:10px 10px;(上下、左右)padding:10px 10px 10px;(上、左右、下)

外边距样式:margin-top:10px; (上边界留空白)margin-right:10px;(右边界留空白)margin-bottom:10px; (下边界留空白)margin-left:10px;(左边界留空白)

也可以简写成margin:10px 10px 10px 10px;(分别对应上右下左)margin:10px 10px;(上下、左右)margin:10px 10px 10px;(上、左右、下)

使用练习:我们随机书写一段文字,设置文字的背景为灰色,边框为红色 2px 实线框,内边距为10px,外边距为10px;那么我们的代码就如下所示:

在网页中的显示效果就如下图所示:

对于css的常用标签今天就先介绍到这里,大家在平时可以自己多加练习练习,熟练一下各个标签的作用。


每日金句:有时候死扛下去总是会有机会的。喜欢我的文章的小伙伴记得关注一下哦,每天将为你更新最新知识。