巧用border效果

最新推荐文章于 2022-08-01 12:48:56 发布
最新推荐文章于 2022-08-01 12:48:56 发布
阅读量120 收藏 1
点赞数
原文链接：http://www.cnblogs.com/520BigBear/p/9929290.html
版权

目的: 我们在做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

 

转载于:https://www.cnblogs.com/520BigBear/p/9929290.html

weixin_33933118
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
5.（高级）CS效果之：边框border
MJ的博客
02-13 1821
一、实现半透明边框 方法： border:10px solid hsla(0,0%,100%,.5); background:#fff; background-clip:padding-box;   二、实现多重边框 方法一：box-shadow background:yellowgreen; box-shadow:0 0 0 10px #655,0 0 0 15
css-border：css实现花里胡哨边框特效
02-09
效果图
有趣的CSS | css-border特效（转动边框，彩虹边框，渐变边框）和css变量
Ethan's Blog
07-03 2万+
让css 把border变得花哨起来
css 设置border边框颜色渐变效果
热门推荐
m0_67401270的博客
08-01 3万+
上下的九宫格执行水平方向的重复属性（拉伸或平铺），左右的格子执行垂直方向的重复属性（拉伸或平铺），而中间的那个格子则水平重复和垂直方向的重复都要执行。下图是起始点到10%的位置标蓝色，10%到30%蓝到白的渐变，30%到70%为白到橘的渐变，从70%到结束标记橘色。从上到下，从起始开始，透明向蓝色渐变到20%的位置，然后又向透明进行渐变到99%的位置，99%到结束是透明。创建线性渐变，需要设置一个起始点和方向（或角度），还要定义终止色，以及两者之间的可选色（可以有多个）。随着渐变的重复，颜色再次循环。...
border妙用
caimaomaocai的博客
04-08 698
border是一个很有意思的css属性，巧妙使用border，有些效果就可以不用图片border的关键字：thin，薄的,等同于1px                            medium(默认值)，中等的，相等3px                            thick，厚的，等同于4pxborder-style的默认值是none而不是solid，所以不设置border...
border简单的效果
蚁走天涯路
08-15 192
border简单的效果 Document .box{ float: left; width:150px; height:550px; border-top:80px solid black; border-radius: 150px 0 0 0
border 和 outline 实现简单的缝边效果
zjuwwj的博客
02-13 1773
1. 关键知识点 2. 实现效果 3. 实现代码
巧用CSS3 border实现图片遮罩效果代码
12-13
复制代码代码如下: <!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”> <... <head> <... charset=utf-8″ /> <... .t
用css来实现透视效果
01-21
今天萌发一个想法，用css来实现透视效果。起初，我想到的是我们常见的添加阴影效果的方法，用多个div通过偏移来实现，但这需要很多 div，不够理想。随后，我想到css的一个属性：border，在border相连接处可以产生对...
巧用CSS3制作时尚的网页加载动画效果
01-08
用CSS3创建预加载动画的准备条件 在我们深入CSS3，创建预加载动画集之前，我们先讨论一些CSS3中非常重要的属性。 伪元素（Pseudo Elements）:before :after 伪元素在用CSS3创建预加载动画的过程中是非常有用的。伪...
wpf border 边框不同颜色
12-19
wpf border边框增加四个属性leftborderbrush.... 分别设置不同颜色
html border阴影效果_CSS—border边框的实用小技巧
weixin_39800957的博客
11-25 1239
border(边框)是盒模型的组成之一，在开发中有许多实际小用法，跟着动手练练吧。1.border简写属性的构成border-width：规定边框的宽度；border-style：规定边框的样式；border-color：规定边框的颜色；2.用border实现三角形的效果简单的demo如下：<!DOCTYPE html> 效果图：那如何成为一个三角形呢？ 只需要给其中三个边的颜色设置...
利用border 轻松实现 三大 杠 效果
weixin_34318956的博客
09-15 73
2019独角兽企业重金招聘Python工程师标准>>> ...
巧用border
zhou_xiao_cheng的博客
01-10 483
border是border-width、border-style及border-color三个属性的简写形式。 相信对于很多人来说，CSS中的border属性并不陌生，我们经常使用它来设置元素的边框样式，但是，border属性还可以用于制作聊天气泡图标和一些应用图标等。
在retina屏中实现1px border效果
10-17 4555
街景wap官网中有在视网膜屏幕中实现1px border的需求. 首先，来看下面视觉给的输出图中的border： 从上面的视觉图可以看到，border是一根非常细的线。这篇文章将说明如何使用border-image实现在视网膜屏中1px的border效果。 注：因为硬件条件的限制，设备像素比（devicePixelRatio）为1的非视网膜屏手机无法达到这样的效果 首先准备一张符合你要求的b
利用css样式画各种图形--初步、进阶、高级（一）
weixin_33754065的博客
02-17 430
 转文请注明：穆乙 http://www.cnblogs.com/pigtail/archive/2013/02/17/2914119.html 利用css画图形，是个有利有弊的写法，好处是不用画图，且节省了一些流量，坏处是要写长串的css样式，而且有可能流量并没有减少，用与否视情况而定，个人选择。 下面是我做测试的一些图形，也是参考了一些网站，简单的注解一下和归纳了一下，其中并没涉及到复...
纯CSS 神奇的边框特效
weixin_39415598的博客
03-01 240
本文简介 点赞 + 关注 + 收藏 = 学会了 阅读本文需要 css 基础。要了解 border-radius 的用法。如果不懂的请先自行查阅 border-radius 的文档。 本期要做的特效如下图所示，请耐心看，这是个 gif动图 ： 这是一个会动的 div 。 公式 原理其实很简单，div 原本是方的，只需改成圆形即可。 所以我们会用到 border-radius 这个属...
1.Btn、Div特效---利用border
qq_42779222的博客
08-29 256
1.效果图（具体代码在最下面）： 2.上面各种效果的思路： 效果一： ①效果图： ②思路：利用设置width和height为0，然后利用border的left和top组成一个三角形并将其定为到左上角的位置，然后hover的时候，让它的border-width从0到140px，从而形成上图的效果； ③如果overflow不设置为hidden，则很明显： 效果二： ①效果图： ②思路：...
border-radius 没有效果
最新发布
10-13
可能是以下几个原因导致 border-radius 没有效果： 1. 没有设置元素的宽度和高度，或者设置的宽度和高度为 0，导致无法显示圆角效果。 2. 元素的 display 属性为 inline，border-radius 只对块级元素生效。 3. 元素...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值