巧用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) 我的博客:劳卜的博客知乎专栏:前端呼啦圈前言由于工作和生活上的一些变化,最近写文章的频率有点下降了,实在不好意思,不过相信不久就会慢慢恢复过来, ...

随机推荐

Spark2.2出现异常：ERROR SparkUI: Failed to bind SparkUI
详细错误信息如下: // :: INFO util.log: Logging initialized @5402ms // :: INFO server.Server: jetty-9.3.z-SNA ...
Chrome 开发者控制台中，你可能意想不到的功能
Chrome 有内置的开发者工具.它拥有丰富的特性,比如元素(Elements).网络(Network)和安全(Security).今天,我们主要关注一下 JavaScript 控制台. 当我最初写代 ...
Spring Core Programming(Spring核心编程) - AOP Concepts(AOP基本概念)
1. What is aspect-oriented programming?(什么是面向切面编程?) Aspects help to modularize cross-cutting concern ...
InfluxDB源码阅读之httpd服务
操作系统 : CentOS7.3.1611_x64 go语言版本:1.8.3 linux/amd64 InfluxDB版本:1.1.0 服务模块介绍源码路径: github.com/influxda ...
Spring Cloud Netflix Zuul 重试会自动跳过经常超时的服务实例的简单说明和分析
在使用E版本的Spring Cloud Netflix Zuul内置的Ribbon重试功能时,发现Ribbon有一个非常有用的特性: 如果某个服务的某个实例经常需要重试,Ribbon则会在自己维护的一 ...
20151224今天发现到的两篇关于CSS架构、可复用可维护CSS和CSS学习提升能有改变思想观念意识的文章分别是CSS架构目标和说说CSS学习中的瓶颈
多讲一个,CSS全称是什么?CSS全称为Cascading Style Sheets,中文翻译为“层叠样式表”,简称CSS样式表又被我们称为CSS样式,CSS样式又被作为一种能制作出各种样式网页的技术 ...
腾讯云服务器web环境配置过程
我买的服务器是: 可用区:香港二区实例类型:标准型S2 操作系统:CentOS 6.5 64位自己的电脑是 win10 ------------以上是背景------------------ 1 ...
[windows+cocos2dx]文本类
文字也是游戏最重要的元素之中的一个,以下就看看使用动态字体和静态字体库怎样创建文字.使用动态字体库创建的文字能够包括经常使用的不论什么字符,一般假设用户要输入名字,这就最好用动态字体库.由于你不知道用 ...
Spring Boot 2.x 学习专栏
Spring Boot 2.0 入门指南 Spring Boot 2.0 返回JSP页面实战 Spring Boot 2.0 热部署指南 Spring Boot 2.0 整合FreeMarker模板引 ...
hdoj:2080
夹角有多大II Time Limit: 1000/1000 MS (Java/Others) Memory Limit: 32768/32768 K (Java/Others)Total Sub ...

巧用border效果

目的: 我们在做css的时候为了提高网站的效率减少服务器请求，我们可以通过css来实现一些简单的图片特效，比如说三角形，这篇文章讲解的是通过边框实现不同的效果。

巧用border效果的更多相关文章

随机推荐

热门专题