圆角DIV 并且不用图片

最新推荐文章于 2024-08-19 16:01:20 发布

jianqi6

最新推荐文章于 2024-08-19 16:01:20 发布

阅读量88

点赞数

分类专栏：前端文章标签： java

本文链接：https://blog.csdn.net/jianqi6/article/details/84053610

版权

前端专栏收录该内容

13 篇文章 0 订阅

订阅专栏

<html>
<head>
    <title>
    不用图片的DIV圆角(修改自一欧洲网站)
    </title>   
<style type="text/css">
body {
    background-color: #FFF;
    margin: 0px;
    padding: 0px;
    font-size: 16px;
    font-family: Georgia;
    text-align:center;
}
div.rounded-box {
    position:relative;
    width: 9em;
    background-color: #eee;
    margin: 3px;
}
/*********************
全DIV的CSS设置
*********************/
div.top-left-corner, div.bottom-left-corner, div.top-right-corner, div.bottom-right-corner
{position:absolute; width:20px; height:20px; background-color:#FFF; overflow:hidden;}
div.top-left-inside, div.bottom-left-inside, div.top-right-inside, div.bottom-right-inside {position:relative; font-size:150px; font-family:arial; color:#eee; line-height: 40px;}
/*********************
单独的DIV的CSS设置
*********************/
div.top-left-corner { top:0px; left:0px; }
div.bottom-left-corner {bottom:0px; left:0px;}
div.top-right-corner {top:0px; right:0px;}
div.bottom-right-corner {bottom: 0px; right:0px;}
div.top-left-inside {left:-8px;}
div.bottom-left-inside {left:-8px; top:-17px;}
div.top-right-inside {left:-25px;}
div.bottom-right-inside {left:-25px; top:-17px;}
div.box-contents {
    position: relative; padding: 18px; color:#f6f; font-size:10.5pt;text-align:left;/*修改PADDING可以调节内容和园角的位置关系*/
}
#wid400 {width:400px} /*定义单独的ID属性可以调整整个圆角DIV的宽度*/
</style>
</head>
<body>
<div class="rounded-box">
    <div class="top-left-corner"><div class="top-left-inside">•</div></div>
    <div class="bottom-left-corner"><div class="bottom-left-inside">•</div></div>
    <div class="top-right-corner"><div class="top-right-inside">•</div></div>
    <div class="bottom-right-corner"><div class="bottom-right-inside">•</div></div>
    <div class="box-contents">
        DIV内容<br>
        DIV内容<br>
        DIV内容<br>
        DIV内容<br>
        DIV内容<br>
        DIV内容<br>
    </div> <!-- end div.内容-->
</div> <!-- end div.圆角 -->

<!-- 又一个圆角DIV,ID为WID400,是指宽度400 -->
<div class="rounded-box" id="wid400">
    <div class="top-left-corner"><div class="top-left-inside">•</div></div>
    <div class="bottom-left-corner"><div class="bottom-left-inside">•</div></div>
    <div class="top-right-corner"><div class="top-right-inside">•</div></div>
    <div class="bottom-right-corner"><div class="bottom-right-inside">•</div></div>
    <div class="box-contents">
        DIV内容DIV内容DIV内容DIV内容DIV内容DIV内容DIV内容DIV内容<br>
        DIV内容DIV内容DIV内容DIV内容DIV内容DIV内容DIV内容DIV内容<br>
        DIV内容DIV内容DIV内容DIV内容DIV内容DIV内容DIV内容DIV内容<br>
        DIV内容DIV内容DIV内容DIV内容DIV内容DIV内容DIV内容DIV内容<br>
        DIV内容DIV内容DIV内容DIV内容DIV内容DIV内容DIV内容DIV内容<br>
        DIV内容DIV内容DIV内容DIV内容DIV内容DIV内容DIV内容DIV内容<br>
        DIV内容DIV内容DIV内容DIV内容DIV内容DIV内容DIV内容DIV内容<br>
        DIV内容DIV内容DIV内容DIV内容DIV内容DIV内容DIV内容DIV内容<br>
        DIV内容DIV内容DIV内容DIV内容DIV内容DIV内容DIV内容DIV内容<br>
        DIV内容DIV内容DIV内容DIV内容DIV内容DIV内容DIV内容DIV内容<br>
        DIV内容DIV内容DIV内容DIV内容DIV内容DIV内容DIV内容DIV内容<br>
        DIV内容DIV内容DIV内容DIV内容DIV内容DIV内容DIV内容DIV内容<br>
        DIV内容DIV内容DIV内容DIV内容DIV内容DIV内容DIV内容DIV内容<br>
        DIV内容DIV内容DIV内容DIV内容DIV内容DIV内容DIV内容DIV内容<br>
        DIV内容DIV内容DIV内容DIV内容DIV内容DIV内容DIV内容DIV内容<br>
       1

[code="java"][/code]

jianqi6

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
圆角DIV 并且不用图片

[code="HTML"] 不用图片的DIV圆角(修改自一欧洲网站) body { background-color: #FFF; margin: 0px; padding: 0px; font-size: 16px; font-family: Georgia; text-align:ce...
复制链接

扫一扫

专栏目录