前端基础知识学习——圆角、透明圆角（十四）

~小先生~

已于 2023-07-11 10:44:42 修改

阅读量544

点赞数

分类专栏：前端 Html Css 文章标签：前端学习

于 2023-07-11 10:44:14 首次发布

本文链接：https://blog.csdn.net/weixin_45496521/article/details/131654956

版权

前端同时被 3 个专栏收录

16 篇文章 1 订阅

订阅专栏

Html

16 篇文章 1 订阅

订阅专栏

Css

12 篇文章 1 订阅

订阅专栏

文章目录

圆角方法一
圆角方法二（推荐）
透明圆角方法一
透明圆角方法二（推荐）

圆角方法一

 /*  添加圆角 方法1：border-radius    cs3不兼容*/
        .bo{width: 100px; height: 200px;border: 1px solid #e5e5e5;margin:30px auto;border-radius: 9px;}

 <div class="bo"   >
        &nbsp;  &nbsp;叽叽喳喳<br/>
            &nbsp;  &nbsp;叽叽喳喳<br/>
            &nbsp;  &nbsp;叽叽喳喳<br/>
            &nbsp;  &nbsp;叽叽喳喳<br/>
           
    </div>

圆角方法二（推荐）

  /*  添加圆角 方法2：宽高可扩展 圆角宽高固定*/
         .box{width: 200px; margin: 30px;}
         .boxHead{background: url(img/boxH.png) repeat-x;height: 9px;overflow: hidden;}
         .boxHeadL{background: url(img/boxHL.png) no-repeat;}
         .boxHeadR{background: url(img/boxHR.png) no-repeat right 0;height: 9px;}
         .boxFoot{background: url(img/boxF.png) repeat-x;height: 9px;overflow: hidden;}
         .boxFootL{background: url(img/boxFL.png) no-repeat;}
         .boxFootR{background: url(img/boxFR.png) no-repeat right 0;height: 9px;}
         .boxC{border-left: 1px solid #e5e5e5;border-right: 1px solid #e5e5e5;}

 <div  class="box" > 
        
        <div class="boxHead">
            <div class="boxHeadL">  
                <div class="boxHeadR">   </div>
                 </div>
        </div>
        <div class="boxC">  
            &nbsp;  &nbsp;叽叽喳喳<br/>
            &nbsp;  &nbsp;叽叽喳喳<br/>
            &nbsp;  &nbsp;叽叽喳喳<br/>
            &nbsp;  &nbsp;叽叽喳喳<br/>
            &nbsp;  &nbsp;叽叽喳喳<br/>
            &nbsp;  &nbsp;叽叽喳喳<br/>
            &nbsp;  &nbsp;叽叽喳喳<br/>
            &nbsp;  &nbsp;叽叽喳喳<br/>
            &nbsp;  &nbsp;叽叽喳喳<br/>
            &nbsp;  &nbsp;叽叽喳喳<br/>
             </div>
        <div class="boxFoot">  
            <div class="boxFootL">  
                <div class="boxFootR">  </div>
             </div> 
        </div>
    </div>

在这里插入图片描述

透明圆角方法一

两边角图像像素宽度为9px

.btn{width: 100px;  margin:  0 auto;background: url(img/btn.gif) repeat-x;}
         .btnl{background: url(img/btnL.gif) no-repeat;position: relative;left: -9px;}
         .btnr{background:url(img/btnR.gif)no-repeat right 0;height: 25px;position: relative; right: -18px;}
           <div class="btn">
        <div class="btnl">  
            <div class="btnr">  </div>
         </div>
    </div>

透明圆角方法二（推荐）

 .bnt1l{width: 100px;margin: 0 auto;background: url(img/btnL.gif) no-repeat;}
         .btn2r{background: url(img/btnR.gif) no-repeat right 0;}
         .btn2{height: 25px;background: url(img/btn.gif) repeat-x;margin: 0 9px;}

 <div class="bnt1l">
        <div class="btn2r">
            <div class="btn2">   </div>
        </div>
    </div>

圆角所有代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        body{background: #000;}
        /*  添加圆角 方法1：border-radius    cs3不兼容*/
        .bo{width: 100px; height: 200px;border: 1px solid #e5e5e5;margin:30px auto;border-radius: 9px;}
         /*  添加圆角 方法2：宽高可扩展 圆角宽高固定*/
         .box{width: 200px; margin: 30px;}
         .boxHead{background: url(img/boxH.png) repeat-x;height: 9px;overflow: hidden;}
         .boxHeadL{background: url(img/boxHL.png) no-repeat;}
         .boxHeadR{background: url(img/boxHR.png) no-repeat right 0;height: 9px;}
         .boxFoot{background: url(img/boxF.png) repeat-x;height: 9px;overflow: hidden;}
         .boxFootL{background: url(img/boxFL.png) no-repeat;}
         .boxFootR{background: url(img/boxFR.png) no-repeat right 0;height: 9px;}
         .boxC{border-left: 1px solid #e5e5e5;border-right: 1px solid #e5e5e5;}
         /* 透明圆角*/
         .btn{width: 100px;  margin:  0 auto;background: url(img/btn.gif) repeat-x;}
         .btnl{background: url(img/btnL.gif) no-repeat;position: relative;left: -9px;}
         .btnr{background:url(img/btnR.gif)no-repeat right 0;height: 25px;position: relative; right: -18px;}

         .bnt1l{width: 100px;margin: 0 auto;background: url(img/btnL.gif) no-repeat;}
         .btn2r{background: url(img/btnR.gif) no-repeat right 0;}
         .btn2{height: 25px;background: url(img/btn.gif) repeat-x;margin: 0 9px;}
    </style>
</head>
<body>
    <div class="bo"   >
        &nbsp;  &nbsp;叽叽喳喳<br/>
            &nbsp;  &nbsp;叽叽喳喳<br/>
            &nbsp;  &nbsp;叽叽喳喳<br/>
            &nbsp;  &nbsp;叽叽喳喳<br/>
           
    </div>
    <div  class="box" > 
        
        <div class="boxHead">
            <div class="boxHeadL">  
                <div class="boxHeadR">   </div>
                 </div>
        </div>
        <div class="boxC">  
            &nbsp;  &nbsp;叽叽喳喳<br/>
            &nbsp;  &nbsp;叽叽喳喳<br/>
            &nbsp;  &nbsp;叽叽喳喳<br/>
            &nbsp;  &nbsp;叽叽喳喳<br/>
            &nbsp;  &nbsp;叽叽喳喳<br/>
            &nbsp;  &nbsp;叽叽喳喳<br/>
            &nbsp;  &nbsp;叽叽喳喳<br/>
            &nbsp;  &nbsp;叽叽喳喳<br/>
            &nbsp;  &nbsp;叽叽喳喳<br/>
            &nbsp;  &nbsp;叽叽喳喳<br/>
             </div>
        <div class="boxFoot">  
            <div class="boxFootL">  
                <div class="boxFootR">  </div>
             </div> 
        </div>
    </div>
    <!-- 透明圆角方法一 -->
    <div class="btn">
        <div class="btnl">  
            <div class="btnr">  </div>
         </div>
    </div>
    <!-- 透明圆角方法二 -->
    <div class="bnt1l">
        <div class="btn2r">
            <div class="btn2">   </div>
        </div>
    </div>
</body>
</html>