巧用border效果
目的: 我们在做css的时候为了提高网站的效率减少服务器请求,我们可以通过css来实现一些简单的图片特效,比如说三角形,这篇文章讲解的是通过边框实现不同的效果。
上面样式部分代码:
<style type="text/css">
.style-border b {
border-width:100px;
border-color:orange blue yellow red;
width:0px;
height:0;
vertical-align:middle;
display:inline-block;
margin:10px;
}
.style-border .style-10 {
width:110px;
height:100px;
border-width:50px 40px;
font-size:15px;
line-height:30px;
}
.style-border .solid {
border-style:solid;
}
.style-border .dotted {
border-style:dotted;
}
.style-border .dashed {
border-style:dashed;
}
.style-border .double {
border-style:double;
}
.style-border .groove {
border-style:groove;
}
.style-border .ridge {
border-style:ridge;
}
.style-border .inset {
border-style:inset;
}
.style-border .outset {
border-style:outset;
}
</style> <div class="style-border">
<b class="solid style-10">实线:solid</b>
<b class="solid"></b>
<b class="dotted style-10">点线:dotted</b>
<b class="dotted"></b>
<b class="dashed style-10">虚线:dashed</b>
<b class="dashed"></b>
<b class="double style-10">双线:double</b>
<b class="double"></b>
<b class="groove style-10">3D凹槽:groove</b>
<b class="groove"></b>
<b class="ridge style-10">3D凸槽:ridge</b>
<b class="ridge"></b>
<b class="inset style-10">3D凹边:inset</b>
<b class="inset"></b>
<b class="outset style-10">3D凸边:outset</b>
<b class="outset"></b>
</div>
----------------------------------------------------------------------------------------------------------------
部分代码:
<style type="text/css">
.one-border b {
border-width:100px;
border-color:orange blue yellow red;
width:0px;
height:0;
vertical-align:middle;
display:inline-block;
margin:10px;
}
.one-border .b-1 {
border-width:20px 20px 0;
border-color:orange transparent transparent;
border-style:solid dashed dashed;
}
.one-border .b-2 {
border-width:20px 20px 20px 0;
border-color:transparent orange transparent transparent;
border-style:dashed solid dashed dashed;
}
.one-border .b-3 {
border-width:0 20px 20px 20px;
border-color:transparent transparent orange;
border-style:dashed dashed solid;
}
.one-border .b-4 {
border-width:20px 0 20px 20px;
border-color:transparent transparent transparent orange;
border-style:dashed dashed dashed solid;
}
.one-border .b-5 {
border-width:5px 30px 50px 30px;
border-color:#efefef #ccc #ddd orange;
border-style:solid;
}
.one-border .b-6 {
border-width:44px 22px 15px;
border-color:#ccc #eee #aaa orange;
border-style:solid;
}
.one-border .b-7 {
border-width:0 0px 55px 55px;
border-color:#ccc #eee #aaa orange;
border-style:solid;
}
.one-border .b-8 {
border-width:55px 0px 0px 55px;
border-color:#ccc #eee #aaa orange;
border-style:solid;
}
.one-border .b-9 {
border-width:20px 0 50px 23px;
border-color:#ccc #eee #aaa orange;
border-style:solid;
}
.one-border .b-10 {
border-width:23px 5px 0 50px;
border-color:orange #ccc #eee #aaa;
border-style:solid;
}
.one-border .b-11 {
border-width:15px 44px 0 22px;
border-color:orange #ccc #eee #aaa;
border-style:solid;
}
.one-border .b-12 {
border-width:55px 55px 0 0px;
border-color:orange #ccc #eee #aaa;
border-style:solid;
}
.one-border .b-13 {
border-width:55px 0px 0 55px;
border-color:orange #ccc #eee #aaa;
border-style:solid;
}
.one-border .b-14 {
border-width:55px 55px 0 0px;
border-color:#ccc orange #eee #aaa;
border-style:solid;
}
.one-border .b-15 {
height:45px;
border-width:5px 3px;
border-color:transparent orange transparent transparent;
border-style:solid;
}
.one-border .b-16 {
height:45px;
border-width:5px 3px;
border-color:transparent transparent transparent orange;
border-style:solid;
}
</style> <div class="one-border">
<b class="b-1"></b>
<b class="b-2"></b>
<b class="b-3"></b>
<b class="b-4"></b>
<b class="b-5"></b>
<b class="b-6"></b>
<b class="b-7"></b>
<b class="b-8"></b>
<b class="b-9"></b>
<b class="b-10"></b>
<b class="b-11"></b>
<b class="b-12"></b>
<b class="b-13"></b>
<b class="b-14"></b>
<b class="b-15"></b>
<b class="b-16"></b>
</div>
-------------------------------------------------------------------------------------------------------------------------
部分代码:
<style type="text/css">
.two-border b {
border-width:100px;
border-color:orange blue yellow red;
width:0px;
height:0;
vertical-align:middle;
display:inline-block;
margin:10px;
}
.two-border .b-1 {
border-width:20px;
border-color:orange orange transparent transparent;
border-style:solid solid dashed dashed;
}
.two-border .b-2 {
border-width:20px;
border-color:transparent orange orange transparent;
border-style:dashed solid solid dashed;
}
.two-border .b-3 {
border-width:20px;
border-color:transparent transparent orange orange;
border-style:dashed dashed solid solid;
}
.two-border .b-4 {
border-width:20px;
border-color:orange transparent transparent orange;
border-style:solid dashed dashed solid;
}
.two-border .b-5 {
border-width:20px;
border-color:orange transparent orange transparent;
border-style:solid dashed solid dashed;
}
.two-border .b-6 {
border-width:20px;
border-color:transparent orange transparent orange;
border-style:dashed solid dashed solid;
}
.two-border .b-7 {
border-width:38px 45px 7px 21px;
border-color:orange orange transparent transparent;
border-style:dashed solid dashed solid;
}
.two-border .b-8 {
border-width:38px 45px 7px 21px;
border-color:orange transparent transparent orange;
border-style:dashed solid dashed solid;
}
.two-border .b-9 {
border-width:20px;
border-color:orange;
border-style:double outset;
}
.two-border .b-10 {
border-width:20px;
border-color:orange orange transparent transparent;
border-style:groove ridge inset dashed;
}
</style> <div class="two-border">
<b class="b-1"></b>
<b class="b-2"></b>
<b class="b-3"></b>
<b class="b-4"></b>
<b class="b-5"></b>
<b class="b-6"></b>
<b class="b-7"></b>
<b class="b-8"></b>
<b class="b-9"></b>
<b class="b-10"></b>
</div>
-------------------------------------------------------------------------------------------------------------
部分代码:
<style type="text/css">
.three-border b {
border-width:100px;
border-color:orange blue yellow red;
width:0px;
height:0;
vertical-align:middle;
display:inline-block;
margin:10px;
}
.three-border .b-1 {
border-width: 20px;
border-color: orange;
border-style: double outset;
} .three-border .b-2 {
border-width: 20px;
border-color: orange orange orange transparent;
border-style: groove ridge inset dashed;
} .three-border .b-3 {
border-width: 20px;
border-color: orange transparent orange orange;
border-style: solid dashed solid solid;
} .three-border .b-4 {
border-width: 20px;
border-color: orange orange transparent orange;
border-style: solid solid dashed solid;
} .three-border .b-5 {
border-width: 20px;
border-color: orange orange orange transparent;
border-style: solid solid solid dashed;
} .three-border .b-6 {
border-width: 20px;
border-color: transparent orange orange orange;
border-style: dashed solid solid solid;
}
</style> <div class="three-border">
<b class="b-1"></b>
<b class="b-2"></b>
<b class="b-3"></b>
<b class="b-4"></b>
<b class="b-5"></b>
<b class="b-6"></b>
</div>
-----------------------------------------------------------------------------------------------------------------------------
部分代码:
<style type="text/css">
.showCase {
padding:20px;
}
.showCase:after,
.showCase:before {
display: table;
content: "";
clear:both;
}
.showCase div {
position:relative;
}
.showCase div b {
position:absolute;
font-size:0px;
line-height:0px;
margin:0;
}
.case-1 {
border:5px solid orange;
width:500px;
height:150px;
}
.case-1 b {
left:50px;
border-style:dashed dashed solid;
}
.case-1 b.b-1 {
border-width:0px 20px 15px;
border-color:transparent transparent orange;
top:-15px;
}
.case-1 b.b-2 {
border-width:0px 20px 15px;
border-color:transparent transparent white;
top:-10px;
}
.case-2 {
background-color:orange;
width:500px;
height:150px;
float:left;
margin-right:30px;
}
.case-2 b {
left:50px;
border-style:solid dashed dashed;
}
.case-2 b.b-1 {
border-width:15px 20px 0px;
border-color:orange transparent transparent;
bottom:-14px;
}
.case-2-1 {
width:300px;
height:130px;
margin-left:0px;
background-color:orange;
float:left;
}
.case-2-1 b.b-1 {
border-width:20px 10px 0 60px;
border-color:orange transparent;
border-style:solid dashed;
bottom:-20px;
left:60px;
}
.case-3 {
border:5px solid orange;
width:250px;
height:100px;
margin-left:50px;
}
.case-3 b {
top:15px;
border-style:dashed solid dashed solid;
border-width:20px 15px 20px 0px;
}
.case-3 b.b-1 {
border-color:transparent orange transparent orange;
left:-15px;
}
.case-3 b.b-2 {
border-color:transparent white transparent transparent;
left:-10px;
}
.case-4 {
border:5px solid orange;
width:250px;
height:100px;
margin-left:50px;
background-color:orange;
}
.case-4 b {
top:15px;
border-style:dashed solid dashed solid;
border-width:20px 0px 20px 15px;
}
.case-4 b.b-1 {
border-color:transparent orange transparent orange;
right:-15px;
}
.case-4 b.b-2 {
border-color:transparent white transparent white;
right:-10px;
display:none;
}
.case-5 {
border:5px solid orange;
width:200px;
height:80px;
margin:10px 0 10px 50px;
background-color:orange;
float:left;
}
.case-5 b.b-1 {
top:5px;
border-color:orange orange transparent transparent;
border-style:solid solid dashed dashed;
border-width:20px;
left:-40px;
}
.case-5 b.b-2 {
top:0px;
border-color:#fff #fff transparent transparent;
border-style:solid solid dashed dashed;
border-width:10px 20px 10px 28px;
left:-53px;
}
.case-5-1 {
width:200px;
height:80px;
margin-left:10px;
background-color:orange;
padding:5px;
margin:10px 0px 10px 50px;
float:left;
}
.case-5-1 b.b-1 {
top:15px;
border-color:transparent orange;
border-style:solid solid dashed;
border-width:0px 0px 40px 40px;
right:-40px;
}
.case-5-1 b.b-2 {
top:15px;
border-color:transparent #fff;
border-style:solid solid dashed;
border-width:0px 0px 15px 40px;
right:-40px;
}
.case-6 {
background-color:orange;
width:150px;
height:30px;
}
.case-6 b.b-1 {
border-width:15px 25px;
border-style:solid dashed solid solid;
border-color:orange transparent orange orange;
right:-28px;
top:0px;
}
.case-6 b.b-2 {
border-width:2px 2px 2px 0px;
border-style:dashed solid dashed dashed;
border-color:transparent orange transparent transparent;
left:-2px;
top:0px;
height:26px;
}
.case-7 {
background-color:orange;
width:150px;
height:30px;
margin-left:30px;
}
.case-7 b {
height:26px;
top:0px;
}
.case-7 b.b-1 {
border-color:transparent orange transparent transparent;
border-width:2px 2px 2px 0px;
border-style:dashed solid dashed solid;
left:-2px;
}
.case-7 b.b-2 {
border-color:transparent transparent transparent orange;
border-width:2px 0px 2px 2px;
border-style:dashed solid dashed solid;
right:-2px;
} </style> <div class="showCase">
<div class="case-1"><b class="b-1"></b><b class="b-2"></b></div>
</div> <div class="showCase">
<div class="case-2"><b class="b-1"></b></div>
<div class="case-2-1"><b class="b-1"></b><b class="b-2"></b></div>
</div>
<div class="showCase">
<div class="case-3"><b class="b-1"></b><b class="b-2"></b></div>
</div>
<div class="showCase">
<div class="case-4"><b class="b-1"></b><b class="b-2"></b></div>
</div>
<div class="showCase">
<div class="case-5"><b class="b-1"></b><b class="b-2"></b></div>
<div class="case-5-1"><b class="b-1"></b><b class="b-2"></b></div>
</div>
<div class="showCase">
<div class="case-6"><b class="b-1"></b><b class="b-2"></b></div>
</div>
<div class="showCase">
<div class="case-7"><b class="b-1"></b><b class="b-2"></b></div>
</div>
原文链接:https://www.cnblogs.com/qwguo/p/9870119.html
巧用border效果的更多相关文章
- 巧用border特性实现聊天气泡效果
利用border特性,实现三角形,很简单,我们直接看效果: html: <div class="bubble-container ">你好么 <div class ...
- css的border效果
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- 巧用border属性
border是常见的css2属性,大家的印象中是不是只是作为边框使用,如下所示: 事实上border,还可以当做图标去使用 我们先来看段代码 <style> .div1{ margin: ...
- 巧用border制作箭头
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8" ...
- JavaScript巧学巧用
关于 微信公众号:前端呼啦圈(Love-FED) 我的博客:劳卜的博客 知乎专栏:前端呼啦圈 前言 由于工作和生活上的一些变化,最近写文章的频率有点下降了,实在不好意思,不过相信不久就会慢慢恢复过来, ...
- WPF学习:3.Border & Brush
上一章<WPF学习:2.Layout-Panels-Countainers>主要介绍了布局,容器和面板.这一章主要开始介绍Border(边界)和Brush(画刷). 代码地址:http:/ ...
- 7种方法实现移动端Retina屏幕1px边框效果
在Reina(视网膜)屏幕的手机上,使用CSS设置的1px的边框实际会比视觉稿粗很多.在之前的项目中,UI告诉我说我们移动项目中的边框全部都变粗了,UI把他的设计稿跟我的屏幕截图跟我看,居然真的不一样 ...
- div+css实现圆形div以及带箭头提示框效果
.img{ width:90px; height:90px; border-radius:45px; margin:0 40%; border:solid rgb(100,100,100) 1px;& ...
- JavaScript 巧学巧用
关于 微信公众号:前端呼啦圈(Love-FED) 我的博客:劳卜的博客 知乎专栏:前端呼啦圈 前言 由于工作和生活上的一些变化,最近写文章的频率有点下降了,实在不好意思,不过相信不久就会慢慢恢复过来, ...
随机推荐
- 使用python实现深度神经网络 2(转)
https://blog.csdn.net/oxuzhenyi/article/details/73026796 导数与梯度.矩阵运算性质.科学计算库numpy 一.实验介绍 1.1 实验内容 虽然在 ...
- 基于Cesium的demo赏析
更新于2019.2.23 Cesium的强大不用多说,所以有很多政府.组织基于cesium做了一些应用,其中不乏有很多优秀的示例,我们大都可以从中获得对自己的项目有益的东西.另:有的网站需要FQ. 官 ...
- webstorm intelliJ IDEA phpstorm 设置鼠标滚动改变字体大小
control+shift+A功能可以搜索对应功能,把mouse:Change font size(Zoom) ...的按钮打开,然后就可以通过 ctrl+鼠标上下滚动调节字体大小
- 【Geek软技能】程序员,为什么写不好一份简历?
一份好简历会是一份好工作的开端. 为什么?沧海也会遗珠 简历,是如此重要,它是获得一份满意工作的敲门砖,但不同的简历敲门的声响可不同. 但很多时候简历给人的感觉也似乎微不足道,因为没有人会真正细致 ...
- 【Docker江湖】之docker部署与理解
转载请注明出处:http://blog.csdn.net/gamer_gyt 博主微博:http://weibo.com/234654758 Github:https://github.com/thi ...
- etcdv3 集群的搭建和使用
etcd是一个开源的分布式键值对数据库,他的每一个节点都有一份数据的copy,当有节点故障时保证了高可用性.etcd使用Raft算法来保证一致性. 第一次接触etcd是在学习k8s时.k8s用etcd ...
- Elasticsearch索引mapping的写入、查看与修改(转)
mapping的写入与查看 首先创建一个索引: curl -XPOST "http://127.0.0.1:9200/productindex" {"acknowledg ...
- 【原创 Hadoop&Spark 动手实践 12】Spark MLLib 基础、应用与信用卡欺诈检测系统动手实践
[原创 Hadoop&Spark 动手实践 12]Spark MLLib 基础.应用与信用卡欺诈检测系统动手实践
- webpack打包css
1.第一种方式 1.安装css-loader和style-loader $ cnpm install css-loader style-loader --save-dev 2.引用的时候使用css-l ...
- mysql(5.7)配置文件示例
# For advice on how to change settings please see# http://dev.mysql.com/doc/refman/5.6/en/server-con ...