功能

站内搜索

文章归档

标签云

chrome插件 (8) ECMAScript (19) HtmlCss (29) JavaScript (45) JQuery (21) JQuery浅谈 (1) JS插件 (6) NodeJS (8) TypeScript (3) wordpress (12) 个人APP (1) 个人随笔 (8) 书籍推荐 (1) 其他分享 (2) 其他资源 (10) 前端库 (3) 工具 (9) 开源项目 (2) 心态书籍 (1) 经验之谈 (13)

分类目录

近期文章

浅谈css边框属性border（4） – border的一些使用技巧

浏览： 2,799次　日期：2018年01月26日 21:51:24　作者：青格勒

浅谈css边框属性border（1）—border的属性介绍

浅谈css边框属性border（2）—border的一般使用

浅谈css边框属性border（3）—border的三角制作

浅谈css边框属性border（4）—border的一些使用技巧

 

css border属性有很多的值，也因此我们可以使用border制作出很多意想不到的css花样。

 

border技巧，我在这里给大家写了几个。

 

1、四个不同颜色的构成

<div class="div1"></div>
<style type="text/css">
    .div1{
        width:0;
        height:0;
        border-width:30px;
        border-style:solid;
        border-color:#000000 #da4939 #144212 #990033;
    }
</style>

 

2、大三角

<div class="div2_1"></div>
<div class="div2_2"></div>
<div class="div2_3"></div>
<div class="div2_4"></div>
<style type="text/css">
    .div2_1{
        width:0; height:0;
        border-width:30px;
        border-style:solid;
        border-color:#000000 #000000 transparent transparent; }
    .div2_2{
        width:0; height:0;
        border-width:30px;
        border-style:solid;
        border-color:#000000 transparent transparent #000000; }
    .div2_3{
        width:0; height:0;
        border-width:30px;
        border-style:solid;
        border-color:transparent transparent #000 #000; }
    .div2_4{
        width:0; height:0;
        border-width:30px;
        border-style:solid;
        border-color:transparent #000000 #000000 transparent; }
</style>

 

3、小三角

<div class="div3_1"></div>
<div class="div3_2"></div>
<div class="div3_3"></div>
<div class="div3_4"></div>
<style type="text/css">
    .div3_1{
        width:0; height:0;
        border-width:30px;
        border-style:solid;
        border-color: #000000 transparent transparent transparent; }
    .div3_2{
        width:0; height:0;
        border-width:30px;
        border-style:solid;
        border-color:transparent transparent transparent #000000; }
    .div3_3{
        width:0; height:0;
        border-width:30px;
        border-style:solid;
        border-color:transparent #000000 transparent transparent; }
    .div3_4{
        width:0; height:0;
        border-width:30px;
        border-style:solid;
        border-color: transparent transparent #000000 transparent; }
</style>

 

4、左右括号

<div class="clearfix">
    <div class="div4_1"></div>
    <div class="div4_2"></div>
    <div style="line-height:50px; text-align: center;">
        <p>CGLweb前端</p>
        <p>CGLweb前端</p>
        <p>CGLweb前端</p>
        <p>CGLweb前端</p>
        <p>CGLweb前端</p>
    </div>
</div>
<style type="text/css">
    .div4_1{
        float:left; width:0; height:300px;
        border-width:10px;
        border-style:solid;
        border-color:#257fad transparent #257fad #000; }
    .div4_2{
        float:right; width:0; height:300px;
        border-width:10px;
        border-style:solid;
        border-color:#257fad #000000 #257fad transparent; }
</style>

 

5、上下括号

<div class="div5_1"></div>
<div style="line-height:50px; text-align: center;">
    <p>CGLweb前端</p>
    <p>CGLweb前端</p>
    <p>CGLweb前端</p>
    <p>CGLweb前端</p>
    <p>CGLweb前端</p>
</div>
<div class="div5_2"></div>
<style type="text/css">
    .div5_1{
        height:0;
        border-width:10px 10px 10px 10px;
        border-style:solid;
        border-color:#257fad #000 transparent #000; }
    .div5_2{
        height:0;
        border-width:10px 10px 10px 10px;
        border-style:solid;
        border-color:transparent #000 #257fad #000; }
</style>

 

6、四个圆圈、每个浏览器长得不一样哦

<div class="div6"></div>
<style type="text/css">
    .div6{
        width:0;
        height:0;
        border-width:50px;
        border-style:dotted;
        border-color:#000 #456 #852 #367;
    }
</style>

 

7、不一样的四方形

<div class="div7"></div>
<style type="text/css">
    .div7{
        height:0;
        width:0;
        border:20px ridge #dd524d; }
</style>

 

8、点四方形

<div class="div8"></div>
<style type="text/css">
    .div8{
        height:0;
        width:0;
        border:20px double #dd524d; }
</style>

 

9、对称双色方形

<div class="div9"></div>
<style type="text/css">
    .div9{
        height:0;
        width:0;
        border:20px groove #dd524d;
    }
</style>

 

10、对称单色方形1

<div class="div10"></div>
<style type="text/css">
    .div10{
        height:0;
        width:0;
        border:20px inset #dd524d;
    }
</style>

 

11、对称单色方形2

<div class="div11"></div>
<style type="text/css">
    .div11{
        height:0;
        width:0;
        border:20px outset #dd524d;
    }
</style>

 

12、双色三角

<div class="div12_1"></div>
<div class="div12_2"></div>
<div class="div12_3"></div>
<div class="div12_4"></div>
<style type="text/css">
    .div12_1{
        height:0; width:0;
        border-width:20px;
        border-style:groove;
        border-color:#dd524d #dd524d transparent transparent; }
    .div12_2{
        height:0; width:0;
        border-width:20px;
        border-style:groove;
        border-color:#dd524d transparent transparent #dd524d; }
    .div12_3{
        height:0; width:0;
        border-width:20px;
        border-style:groove;
        border-color:transparent transparent #dd524d #dd524d; }
    .div12_4{
        height:0; width:0;
        border-width:20px;
        border-style:groove;
        border-color:transparent #dd524d #dd524d transparent; }
</style>

 

13、缺角四方

<div class="div13"></div>
<style type="text/css">
    .div13{
        height:0;
        width:0;
        border-width:20px;
        border-style:double;
        border-color:transparent #dd524d #dd524d #dd524d;
    }
</style>

 

14、缺角圆

<div class="div14"></div>
<style type="text/css">
    .div14{
        height:0; width:0;
        border-width:20px;
        border-style:double;
        border-color:transparent #dd524d #dd524d #dd524d;
        border-radius:50%; }
</style>

 

15、波纹三角

<div class="div15_1"></div>
<div class="div15_2"></div>
<div class="div15_3"></div>
<div class="div15_4"></div>
<style type="text/css">
    .div15_1{
        height:0; width:0;
        border-width:20px;
        border-style:double;
        border-color:#dd524d #dd524d transparent transparent; }
    .div15_2{
        height:0; width:0;
        border-width:20px;
        border-style:double;
        border-color:#dd524d transparent transparent #dd524d; }
    .div15_3{
        height:0; width:0;
        border-width:20px;
        border-style:double;
        border-color:transparent transparent #dd524d #dd524d; }
    .div15_4{
        height:0; width:0;
        border-width:20px;
        border-style:double;
        border-color:transparent #dd524d #dd524d transparent; }
</style>

 

16、四色圆

<div class="div16"></div>
<style type="text/css">
    .div16{
        width:0; height:0;
        border-width:30px;
        border-style:solid;
        border-color:#000000 #da4939 #144212 #990033;
        border-radius:50%; }
</style>

 

17、点圆

<div class="div17"></div>
<style type="text/css">
    .div17{
        height:0;
        width:0;
        border:20px double #dd524d;
        border-radius:50%;
    }
</style>

 

18、小波纹三角

<div class="div18_1"></div>
<div class="div18_2"></div>
<div class="div18_3"></div>
<div class="div18_4"></div>
<style type="text/css">
    .div18_1{
        height:0; width:0;
        border-width:20px;
        border-style:double;
        border-color:#dd524d transparent transparent transparent; }
    .div18_2{
        height:0; width:0;
        border-width:20px;
        border-style:double;
        border-color:transparent transparent transparent #dd524d; }
    .div18_3{
        height:0; width:0;
        border-width:20px;
        border-style:double;
        border-color:transparent transparent #dd524d transparent; }
    .div18_4{
        height:0; width:0;
        border-width:20px;
        border-style:double;
        border-color:transparent #dd524d transparent transparent; }
</style>

 

就这些吧，

文章所使用的demo-》border使用技巧

文章链接：http://cenggel.com/htmlcss/58.html

版权声明：文章《浅谈css边框属性border（4） – border的一些使用技巧》由青格勒编写，转载请带上文章链接。

本章内容纯属乱讲，如有雷同，纯属巧合。如有借鉴之处已表明出处。

打赏 +5 分享

点击任意位置关闭窗口，感谢您的支持。


打赏规则 - 为了避免对于打赏模式产生误解，说明一下几点内容：

  • 1.打赏纯粹自愿，金额不限，别太多，1块就行；
  • 2.打赏不能作为解答疑问的理由；
  • 3.打赏不能帮你做毕业设计或论文；
  • 4.打赏不能帮你做工作中的项目；
  • 5.打赏就是这不能那不能，只是单纯打赏而已。
  • 5.最后谢谢支持。
关闭
相关文章
上一篇：浅谈css边框属性border（3） - border的三角制作 下一篇：浅谈轮廓属性outline（1） — outline的属性介绍

发表评论

邮箱地址不会被公开。 必填项已用*标注

上 下