HTML CSS圆形边框没有图像

Posted

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了HTML CSS圆形边框没有图像相关的知识，希望对你有一定的参考价值。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title>纯CSS制作的圆角边框</title>
    <style type="text/css">
            body
            {
                font-size:12px;
            }
            #xsnazzy h1, #xsnazzy h2, #xsnazzy p 
            {
                margin:0 10px; 
                letter-spacing:1px;
            }
            #xsnazzy h1 
            {
                font-size:2.5em; 
                color:#06a;
            }
            #xsnazzy h2 
            {
                font-size:2em;
                color:#06a; 
                border:0;
            }
            #xsnazzy p 
            {
                padding-bottom:0.5em;
            }
            #xsnazzy h2 
            {
                padding-top:0.5em;
            }
            #xsnazzy 
            {
                background: transparent; 
                margin:1em;
            }

            .xtop, .xbottom 
            {
                display:block; 
                background:transparent; 
                font-size:2px;
            }
            .xb1, .xb2, .xb3, .xb4 
            {
                display:block; 
                overflow:hidden;
            }
            .xb1, .xb2, .xb3 
            {
                height:1px;
            }
            .xb2, .xb3, .xb4 
            {
                background:#fff; 
                border-left:1px solid #08c; 
                border-right:1px solid #08c;
            }
            
            .xb1 {margin:0 5px; background:#08c;}
            .xb2 {margin:0 3px; border-width:0 2px;}
            .xb3 {margin:0 2px;}
            .xb4 {height:2px; margin:0 1px;}

            .xboxcontent {display:block; background:#fff; border:0 solid #08c; border-width:0 1px;}
            
        </style>
</head>
<body>
    <div id="xsnazzy">
        <b class="xtop">
            <b class="xb1" ></b>
            <b class="xb2"></b>
            <b class="xb3"></b>
            <b class="xb4"></b>
        </b>
        <div class="xboxcontent">
            <h1>
                Snazzy Borders</h1>
            <p>
                Based on Nifty Corners By Alessandro Fulciniti<br />
                http://pro.html.it/esempio/nifty/</p>
            <h2>
                Rounded borders without images</h2>
            <p>
                Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh
                euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad
                minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip
                ex ea commodo consequat.</p>
            <p>
                Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat,
                vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio
                dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait
                nulla facilisi.</p>
        </div>
        
        <b class="xbottom">
            <b class="xb4"></b>
            <b class="xb3"></b>
            <b class="xb2"></b>
            <b class="xb1"></b>
        </b>
    </div>
</body>
</html>

怎样用css写出圆形边框

看到一些网站的椭圆边框是用css样式写出来得，请问怎样写？

1、首先打开sublime text编辑器，新建一个html文件，里面写入一个p标签：

2、然后设置p标签的样式，这里先设置一个边框，然后设置圆角边框，主要使用CSS3属性border-radius属性定义圆角效果。其中的数值为参数length是浮点数和单位标识符组成的长度值，不可为负值，这里圆角的值越大，圆角的弧度也越大：

3、最后打开浏览器，就可以看到圆角边框了：

 参考技术A

1、首先打开sublime text编辑器，新建一个html文件，里面写入一个p标签：

2、然后设置p标签的样式，这里先设置一个边框，然后设置圆角边框，主要使用CSS3属性border-radius属性定义圆角效果。其中的数值为参数length是浮点数和单位标识符组成的长度值，不可为负值，这里圆角的值越大，圆角的弧度也越大：

3、最后打开浏览器，就可以看到圆角边框了：

 参考技术B

css代码：

.yj

    padding:10px; width:300px; height:50px;

    border: 2px solid #000000;

    -moz-border-radius: 15px; 

    -webkit-border-radius: 15px; 

    border-radius:15px;           

 -moz-border-radius: 15px; -webkit-border-radius: 15px;  这两个是为了兼容其他一些不常用浏览写的css圆角代码

html代码：

<div class="yj">这个div四个角都圆15px;</div>

结果如下：

图片圆角也是一样的：

css代码：

.yj-moz-border-radius: 15px;     -webkit-border-radius: 15px; border-radius:15px;

html代码：

<img src="xp.jpg" width="100px" height="100px;" class="yj" />

结果如下：

css3圆角代码也支持上下左右的：

css代码这么写：

.yj

    padding:10px; width:300px; height:50px;

    border: 2px solid #000000;

    -moz-border-radius: 0px 0px 20px 25px;;     

    -webkit-border-radius: 0px 0px 20px 25px;;  

    border-radius:0px 0px 20px 25px;; 

结果如下

圆角代码也支持拆分的（四个边框都圆角10px的拆分css代码如下）：

border-top-left-radius: 10px;   

border-top-right-radius: 10px; 

 border-bottom-right-radius:10px;  

border-bottom-left-radius:  10px;

 参考技术C 你看到一些网站的椭圆边框不是用css样式写出来的。而是先制作椭圆边框（图片格式），然后再用背景图片的方式贴上去。http://hi.baidu.com/leishengqing本回答被提问者采纳 参考技术D photoshop

以上是关于HTML CSS圆形边框没有图像的主要内容，如果未能解决你的问题，请参考以下文章

CSS 响应式边框半径图像

怎样用css写出圆形边框

CSS - 圆形边框看起来太像素化

如何在图像视图周围制作圆形边框

带有条目并具有圆形边框的图像

溢出：在 IE8 中使用 css3pie 隐藏圆形边框？