CSS邊框作圖

本文轉載自查看原文 2018-07-12 21:38 783 css

原文

　　簡書原文：https://www.jianshu.com/p/537a878304f2

大綱

　　1、border-style的值
　　2、利用border作圖——基本圖形
　　3、利用border作圖——特殊圖形

1、border-style的值

<!DOCTYPE html>  
<html>  
<head>  
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />  
<title>inline-block</title>  
<style>
*{
    margin: 0;
    padding: 0;
}
div{
    margin:100px auto;
}
</style>
<link rel="stylesheet" href="styles.css" type="text/css"/>
</head>  
<body>  
<div>
</div>
</body>  
</html>

div{
    width:100px;
    height:100px;
    border:20px green;
    border-style:solid;
}

不同的border-style的值獲得的效果是不同的

1.1、solid：定義實線

1.2、double：定義雙線，雙線的寬度等於 border-width 的值

1.3、dotted：定義點狀邊框，在大多數瀏覽器中呈現為實線

1.4、dashed：定義虛線，在大多數瀏覽器中呈現為實線

1.5、groove：定義 3D 凹槽邊框，其效果取決於 border-color 的值

1.6、ridge：定義 3D 壟狀邊框，其效果取決於 border-color 的值

1.7、inset：定義 3D inset 邊框，其效果取決於 border-color 的值

1.8、outset：定義 3D outset 邊框，其效果取決於 border-color 的值

2、利用border作圖——基本圖形

　　基本的html文件，基本圖形在這個html中的div上創造

<!DOCTYPE html>  
<html>  
<head>  
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />  
<title>inline-block</title>  
<style>
*{
    margin: 0;
    padding: 0;
}
div{
    margin:100px auto;
}
</style>
<link rel="stylesheet" href="styles.css" type="text/css"/>
</head>  
<body>  
<div>
</div>
</body>  
</html>

2.1、給不同的邊框設置不同的顏色

div{
    width:100px;
    height:100px;
    border-top:100px solid red;
    border-bottom:100px solid orange;
    border-left:100px solid green;
    border-right:100px solid blue;
}

2.2、將DIV的寬高設置為0

div{
    width:0;
    height:0;
    border-top:100px solid red;
    border-bottom:100px solid orange;
    border-left:100px solid green;
    border-right:100px solid blue;
}

2.3、梯形

div{
    width:100px;
    height:0;
    font-size:0;
    line-height:0;
    overflow:hidden;
    border-bottom:100px solid orange;
    border-left:100px dashed transparent;
    border-right:100px dashed transparent;
}

2.4、三角形

/*
    切記高度和寬度都要設置為0，通過邊框的width來控制三角形的大小
    通過調整不同方向的邊框顯示顏色和鄰近的邊框的透明可以得到不同方向上的等腰三角形
    或者
    可以設置兩個鄰近邊框，一個顯示顏色一個不顯示顏色從而形成不同方向上的直角三角形
*/
/*等腰三角形*/
div{
    width:0;
    height:0;
    font-size:0;
    line-height:0;
    overflow:hidden;
    border-bottom:100px solid orange;
    border-left:100px dashed transparent;
    border-right:100px dashed transparent;
}
/*直角三角形*/
div{
    width:0;
    height:0;
    font-size:0;
    line-height:0;
    overflow:hidden;
    border-bottom:100px solid orange;
    border-left:100px dashed transparent;
}

3、利用border作圖——特殊圖形

3.1、疊加三角形

<div class=box>
    <span class="arrow_1"></span>
    <span class="arrow_2"></span>
</div>
<!--
    設置不同方向的兩個三角形從而疊加出不同方向的三角形箭頭
-->

.box{
    position:relative;
}
.box span{
    width:0;
    height:0;
    font-size:0;
    line-height:0;
    overflow:hidden;
    position:absolute;
}
span.arrow_1{
    border-top:20px solid #beceeb;
    border-left:20px dashed transparent;
    border-right:20px dashed transparent;
    left:80px;
    bottom:-20px;
    z-index:1;
}
span.arrow_2{
    border-top:20px solid #ffffff;
    border-left:20px dashed transparent;
    border-right:20px dashed transparent;
    left:80px;
    bottom:-13px;
    z-index:2;
}

3.2、疊加兩個相反方向的三角形

<div class="triangle-updown">
</div>

.triangle-updown {
    width: 0;
    height: 0;
    border-left: 50px solid transparent;
    border-right: 50px solid transparent;
    border-bottom: 100px solid #669;
    position: relative;
    margin-bottom: 50px
}
.triangle-updown:after {
    content: " ";
    width: 0;
    height: 0;
    border-left: 50px solid transparent;
    border-right: 50px solid transparent;
    border-top: 100px solid #669;
    position: absolute;
    top: 50px;
    left: -50px;
}

3.3、利用橢圓形的疊加形成心形

.heart {
    width: 160px;
    height: 200px;
    position: relative
}

.heart:before {
    content: " ";
    border: 0 solid transparent;
    -moz-border-radius: 100px;
    -webkit-border-radius: 100px;
    border-radius: 100px 100px 0 0;
    width: 80px;
    height: 120px;
    background: #669;
    -moz-transform: rotate(-45deg);
    -ms-transform: rotate(-45deg);
    -o-transform: rotate(-45deg);
    -webkit-transform: rotate(-45deg);
    position: absolute;
    left: 20px;
}

.heart:after {
    content: " ";
    border: 0 solid transparent;
    -moz-border-radius: 100px;
    -webkit-border-radius: 100px;
    border-radius: 100px 100px 0 0;
    width: 80px;
    height: 120px;
    background: #669;
    -moz-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    -o-transform: rotate(45deg);
    -webkit-transform: rotate(45deg);
    position: absolute;
    left: 48px;
    top: 0px;
}

3.4、橢圓提示泡

.oval-pop {
    width: 200px;
    height: 100px;
    background: #669;
    -moz-border-radius: 100px / 50px;
    -webkit-border-radius: 100px / 50px;
    border-radius: 100px / 50px;
    margin-bottom: 50px;
    position: relative
}

.oval-pop:after {
    content: "";
    border: 0 solid transparent;
    border-bottom: 30px solid #669;
    -moz-border-radius: 0 0 0 200px;
    -webkit-border-radius: 0 0 0 200px;
    border-radius: 0 0 0 200px;
    width: 50px;
    height: 50px;
    position: relative;
    margin-top: 20px;
    -webkit-transform: rotate(-90deg);
    -moz-transform: rotate(-90deg);
    -ms-transform: rotate(-90deg);
    -o-transform: rotate(-90deg);
    position: absolute;
    top: 50px;
    left: 20px
}

3.5、對話框1

<div class=box>
    <span class="arrow_1"></span>
    <span class="arrow_2"></span>
    hellos
</div>

.box{
    width:300px;
    padding:30px 20px;
    border:5px solid #beceeb;
    position:relative;
}
.box span{
    width:0;
    height:0;
    font-size:0;
    line-height:0;
    overflow:hidden;
    position:absolute;
}
span.arrow_1{
    border-top:20px solid #beceeb;
    border-left:20px dashed transparent;
    border-right:20px dashed transparent;
    left:80px;
    bottom:-20px;
    z-index:1;
}
span.arrow_2{
    border-top:20px solid #ffffff;
    border-left:20px dashed transparent;
    border-right:20px dashed transparent;
    left:80px;
    bottom:-13px;
    z-index:2;
}

3.6、對話框2——偽類

<div class=box>
    <span>hellos</span>
</div>

.box{
    width:300px;
    padding:30px 20px;
    border:5px solid #beceeb;
    position:relative;
}
.box:after,.box:before{
    content:'';
    width:0;
    height:0;
    font-size:0;
    line-height:0;
    overflow:hidden;
    position:absolute;
}
.box:after{
    border-top:20px solid #beceeb;
    border-left:20px dashed transparent;
    border-right:20px dashed transparent;
    left:80px;
    bottom:-20px;
    z-index:1;
}
.box:before{
    border-top:20px solid #ffffff;
    border-left:20px dashed transparent;
    border-right:20px dashed transparent;
    left:80px;
    bottom:-13px;
    z-index:2;
}

參考網址

https://www.cnblogs.com/wanghuih/p/5836635.html
http://www.cnblogs.com/pigtail/archive/2013/02/17/2914119.html
https://www.w3cplus.com/css/create-shapes-with-css

免責聲明！

本站轉載的文章為個人學習借鑒使用，本站對版權不負任何法律責任。如果侵犯了您的隱私權益，請聯系本站郵箱yoyou2525@163.com刪除。

猜您在找 css邊框顏色漸變 CSS 邊框和顏色 CSS - 實現熒光邊框 CSS之邊框覆蓋 css 文字邊框 css 邊框圓角的方法 css中的邊框樣式 css實現動態邊框 CSS 邊框和輪廓（收藏） Css圓角邊框