CSS+ div实现页面边框效果

发布网友发布时间：2022-04-26 20:54

共8个回答

懂视网时间：2022-04-06 16:36

随着CSS3的发展，网络开发的进步已经走向了完美的想象。对于文本和其他用法，CSS drop-shadow可以实现一个好看的效果框，我们直接来看具体的代码。

这是html部分：

<div id="beauty-boxes">Some example text</div>

CSS代码

 #beauty-boxes{
 transition: all 0.5s ease;
 position:relative;
 float:left;
 width:45%;
 padding:2px;
 margin:3px;
 background:#fff;
 -webkit-box-shadow:0 1px 4px rgba(0, 0, 0, 0), 0 0 40px rgba(0, 0, 0, 0) inset;
 -moz-box-shadow:0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0) inset;
 box-shadow:0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0) inset;
 -moz-border-radius:4px;
 border-radius:4px;
 } 
 #beauty-boxes:before,
 #beauty-boxes:after {
 content:"";
 position:absolute;
 z-index:-3;
 bottom:15px;
 left:12px;
 width:50%;
 height:20%;
 max-width:350px;
 max-height:90px;
 -webkit-box-shadow:0 15px 10px rgba(0, 0, 0, 0.7);
 -moz-box-shadow:0 15px 10px rgba(0, 0, 0, 0.7);
 box-shadow:0 15px 10px rgba(0, 0, 0, 0.7);
 -webkit-transform:rotate(-3deg);
 -moz-transform:rotate(-3deg);
 -ms-transform:rotate(-3deg);
 -o-transform:rotate(-3deg);
 transform:rotate(-3deg);
 }
 #beauty-boxes:after {
 right:10px;
 left:auto;
 -webkit-transform:rotate(3deg);
 -moz-transform:rotate(3deg);
 -ms-transform:rotate(3deg);
 -o-transform:rotate(3deg);
 transform:rotate(3deg);
 }.beauty-boxes p {
 font-size:16px;
 font-weight:bold;
 }
 #beauty-boxes:hover{
 background-color:#161616;
 color:#fff;
 }

效果如下：

热心网友时间：2022-04-06 13:44

百度这个确实是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>
<title>无标题页</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<style>
div { margin:0; padding:0; border-color:#333; font-size:12px; text-align:center; line-height:70px;}
.box-rod { width:200px; margin:100px auto; }
.rod { height:80px; border-left: 1px solid; border-right: 1px solid; }
.box-rod .rod1 { border-top: 1px solid; font-size: 0; height: 0; margin: 0 3px; overflow: hidden; }
.box-rod .rod2, .box-rod .rod3 { border: 0 solid; height: 1px; margin: 0 1px; overflow: hidden; }
.box-rod .rod2 { border-left-width: 2px; border-right-width: 2px; }
.box-rod .rod3 { border-left-width: 1px; border-right-width: 1px; }
.box-rod .rod4 { border-bottom: 1px solid; font-size: 0; height: 0; margin: 0 3px; overflow: hidden; }
</style>
</head>
<body>
<div class="box-rod">
<div class="rod1"></div>
<div class="rod2"></div>
<div class="rod3"></div>
<div class="rod"> 确实css写的</div>
<div class="rod3"></div>
<div class="rod2"></div>
<div class="rod4"></div>
</div>
</body>
</html>

热心网友时间：2022-04-06 15:02

可以是有css

box-shadow添加边框阴影效果

border-style选择边框样式等实习边框效果

border-style的可选属性有如图供选择

热心网友时间：2022-04-06 16:36

以上面代码为例：

border:#000 solid 2px

四个边框：颜色实线宽2pxl，这三个是边框的最基本元素，可以根据需求选取。

如需个别边框特别设置：

border-left:左边 border-right:右边 border-top:上边 border-bottom：下边

width:1000px; height:300px;

宽和高

border-radius:30px

这个是边框圆角的整合代码，意思是四个边框的角30px的地方开始变成弧形，也可以拆分成

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

左上右上右下左下角的弧度数值

border-top-left-radius: 10px;
border-top-right-radius: 10px;
border-bottom-right-radius:10px;
border-bottom-left-radius:  10px;

也可以写成这样的，具体数值根据自己的需求。

热心网友时间：2022-04-06 18:28

<!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>
<title>无标题页</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<style>
div { margin:0; padding:0; border-color:#333; font-size:12px; text-align:center; line-height:70px;}
.box-rod { width:200px; margin:100px auto; }
.rod { height:80px; border-left: 1px solid; border-right: 1px solid; }
.box-rod .rod1 { border-top: 1px solid; font-size: 0; height: 0; margin: 0 3px; overflow: hidden; }
.box-rod .rod2, .box-rod .rod3 { border: 0 solid; height: 1px; margin: 0 1px; overflow: hidden; }
.box-rod .rod2 { border-left-width: 2px; border-right-width: 2px; }
.box-rod .rod3 { border-left-width: 1px; border-right-width: 1px; }
.box-rod .rod4 { border-bottom: 1px solid; font-size: 0; height: 0; margin: 0 3px; overflow: hidden; }
</style>
</head>
<body>
<div class="box-rod">
<div class="rod1"></div>
<div class="rod2"></div>
<div class="rod3"></div>
<div class="rod"> 确实css写的</div>
<div class="rod3"></div>
<div class="rod2"></div>
<div class="rod4"></div>
</div>
</body>
</html>

热心网友时间：2022-04-06 20:36

纯CSS+DIV无法直接写，有JS可控制圆角，
通常的话你也就只能把圆角做成小图片进行拼接

热心网友时间：2022-04-06 23:00

把圆角切成一个图片，当做背景，就可以做了

热心网友时间：2022-04-07 01:42

要么用 JS 做控制做圆角
要么就把他当做背景插入网页中看你如何操作了
建议做成图片因为简单些