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

文章目录

  • 圆角方法一
  • 圆角方法二(推荐)
  • 透明圆角方法一
  • 透明圆角方法二(推荐)

前端基础知识学习——圆角、透明圆角(十四)_第1张图片

圆角方法一

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

 <div class="bo"   >
            叽叽喳喳<br/>
                叽叽喳喳<br/>
                叽叽喳喳<br/>
                叽叽喳喳<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">  
                叽叽喳喳<br/>
                叽叽喳喳<br/>
                叽叽喳喳<br/>
                叽叽喳喳<br/>
                叽叽喳喳<br/>
                叽叽喳喳<br/>
                叽叽喳喳<br/>
                叽叽喳喳<br/>
                叽叽喳喳<br/>
                叽叽喳喳<br/>
             div>
        <div class="boxFoot">  
            <div class="boxFootL">  
                <div class="boxFootR">  div>
             div> 
        div>
    div>

前端基础知识学习——圆角、透明圆角(十四)_第2张图片

透明圆角方法一

两边角图像像素宽度为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>Documenttitle>
    <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"   >
            叽叽喳喳<br/>
                叽叽喳喳<br/>
                叽叽喳喳<br/>
                叽叽喳喳<br/>
           
    div>
    <div  class="box" > 
        
        <div class="boxHead">
            <div class="boxHeadL">  
                <div class="boxHeadR">   div>
                 div>
        div>
        <div class="boxC">  
                叽叽喳喳<br/>
                叽叽喳喳<br/>
                叽叽喳喳<br/>
                叽叽喳喳<br/>
                叽叽喳喳<br/>
                叽叽喳喳<br/>
                叽叽喳喳<br/>
                叽叽喳喳<br/>
                叽叽喳喳<br/>
                叽叽喳喳<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>

你可能感兴趣的:(前端,Html,Css,前端,学习)