div无图片圆角矩形设计

最新推荐文章于 2022-01-07 16:32:42 发布
最新推荐文章于 2022-01-07 16:32:42 发布
阅读量714 收藏
点赞数
分类专栏： js html
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/xyy410874116/article/details/9384283
版权
js 同时被 2 个专栏收录
10 篇文章 0 订阅
订阅专栏
html
10 篇文章 0 订阅
订阅专栏

<!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>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>无标题文档</title>
</head>
<style type="text/CSS">
.nifty{margin:0;background:#e9e9e9; width:850px;}
p {padding:10px} /*调节div高度的*/
div.rtop {display:block;background:#000;}  /*是圆角矩形背景色*/
div.rtop div {display:block;height:1px;overflow:hidden;background:#e9e9e9}
div.r1{margin:0 5px}
div.r2{margin:0 3px}  /*上右下左*/
div.r3{margin:0 2px}
div.rtop div.r4 {margin:0 1px;height:2px;}
.content{text-align:center; margin:0px; padding:20px 10px; height:250px; font-size:14px;}    /*设置div高度*/
</style>


<body>
<div style="position:absolute; top:200px; left:200px;">
<div id="nifty" class="nifty">
    <div class="rtop">
        <div class="r1"></div>
        <div class="r2"></div>
        <div class="r3"></div>
        <div class="r4"></div>
    </div>
   <p id="content" class="content"> </p>
     
    <div class="rtop">
        <div class="r4"></div>
        <div class="r3"></div>
        <div class="r2"></div>
        <div class="r1"></div>
    </div>
</div>
</div>

 

</body>
</html>

xyy410874116
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
使用Div+CSS纯图片实现圆角矩形的方法小结
09-24
主要介绍了使用Div+CSS纯图片实现圆角矩形的方法小结,CSS3中用代码绘制圆角矩形非常方便,而本文要介绍的则是利用图片来实现兼容性更强的方法,需要的朋友可以参考下
div+css制作圆角矩形的原理示例解读
09-25
在网页设计中，使用div+CSS来创建圆角矩形是一种常见的方法，它利用了CSS的边框和背景属性来模拟圆角效果。在没有CSS3之前，由于浏览器的兼容性问题，这种方法尤为流行。本篇文章将深入解析如何通过div+CSS实现圆角...
div无图片实现圆角矩形
侯永奎
03-17 580
<br />很简单的css,大家一看就明白了<br /><html> <head> <title>css圆角效果</tITle> <meta http-equiv="content-type" content="text/html; charset=gb2312"> <mce:style type="text/css"><!-- div.RoundedCorner{background: #12C81E;color:white;font-size:14px;} b.rtop, b.rbottom
Android 9上圆角无效的问题
chends
09-02 1487
在Android 9的系统上如果使用PorterDuffXfermode的方法实现画圆角的话会失效，官方issue地址https://issuetracker.google.com/issues/111819103，在这个帖子中谷歌回复到，有三种方法 使用android.view.ViewOutlineProvider（可以在这个示例地址https://github.com/googlesamp...
设置圆角图片的两种方法
梁森的博客
10-16 4064
在项目需求中有时会要求将图片设置成圆形的，尤其是头像。将图片设置成圆形暂时知道有两种方法：1.设置圆角  2.将图片进行裁剪。 方法1:设置圆角 代码： imagV.layer.cornerRadius = 5;   // (设置为正方形图片的边长的一半) imagV.layer.masksToBounds = YES; 在iOS8之前此方法设置的图片如果放在单元格中
div盒子边框圆角_div+css用边框实现圆角矩形(多样式)
weixin_39983993的博客
12-22 922
简洁型css圆角：方法1：简洁型css圆角矩形code1:复制代码代码如下:.b1,.b2,.b3,.b4,.b1b,.b2b,.b3b,.b4b,.b{}{display:block;overflow:hidden;}.b1,.b2,.b3,.b1b,.b2b,.b3b{}{height:1px;}.b2,.b3,.b4,.b2b,.b3b,.b4b,.b{}{border-left:1px s...
html做轮播图的圆角矩形,div+css制作圆角矩形的原理示例解读
weixin_33699970的博客
06-30 254
复制代码代码如下:div+CSS圆角矩形body{padding: 20px;background-color: #FFF;font: 100.01% "Trebuchet MS",Verdana,Arial,sans-serif}div#nifty{ margin: 0 10%;background: #9BD1FA}p {padding:10px}div.rtop, div.rbottom{d...
div+css实现圆角矩形的几种方法
weixin_33712881的博客
11-23 1163
1.css3实现圆角矩形，兼容性有问题 1 2 3 4 5 6 7 8 <div id="round"></div> #round { padding:10px;width:300px;height:50px; border:5pxsolid#dedede; -moz...
html中div边框变圆滑,div+css用边框实现圆角矩形(多样式)
weixin_39860280的博客
06-18 677
简洁型css圆角：方法1：简洁型css圆角矩形code1:复制代码代码如下:.b1,.b2,.b3,.b4,.b1b,.b2b,.b3b,.b4b,.b{}{display:block;overflow:hidden;}.b1,.b2,.b3,.b1b,.b2b,.b3b{}{height:1px;}.b2,.b3,.b4,.b2b,.b3b,.b4b,.b{}{border-left:1px s...
div css3 border-radius 之圆角 div圆角 图片圆角
徊忆羽菲
01-07 1622
div css3 border-radius 之圆角 div圆角 图片圆角CSS 圆角CSS border-radius 属性1、带有指定背景颜色的元素的圆角：2、带边框元素的圆角：3、带有背景图像的元素的圆角：提示CSS border-radius - 指定每个角 CSS 圆角 通过 CSS border-radius 属性，可以实现任何元素的“圆角”样式。 CSS border-radius 属性 CSS border-radius 属性定义元素角的半径。 提示：您可以使用此属性为元素添加圆角！ 1、带
JS实现DIV、图片圆角效果
03-27
综上所述，JS实现DIV和图片圆角效果虽然比纯CSS3略显复杂，但通过合理的代码组织和浏览器兼容性检查，可以确保在各种环境下提供良好的用户体验。同时，随着浏览器对新特性的支持度不断提高，使用原生CSS3的圆角效果...
div+css用边框实现圆角矩形(多样式)
09-25
本篇文章将详细介绍如何仅用CSS边框实现圆角矩形，包括简洁型、无图片实现以及3D圆角矩形的方法。 首先，让我们看看简洁型CSS圆角矩形的实现。这种方法是通过嵌套`<b>`元素和设置不同边框来达到圆角效果。例如，...
给Div添加边框颜色
热门推荐
win的小屋
08-19 5万+
例如：
点击网页上的联系我们弹出QQ对话框的实现
win的小屋
03-29 1万+
http://wpa.qq.com/msgrd?v=1&uin=QQ号码&site=qq&menu=yes">
重新加载父页中iframe的方法
win的小屋
08-18 9950
1：window.parent.frames[1].location.reload(); //适用于只有一个iframes； 2：window.parent.frames. getAllRoom.location.reload(); //适用于多个或一个iframes； 3：
禁止刷新网页、防止刷新网页、禁止后退等操作的代码
win的小屋
09-13 4537
屏蔽鼠标右键、Ctrl+N、Shift+F10、Alt+F4、F11、F5刷新、退格键               //屏蔽鼠标右键、Ctrl+N、Shift+F10、F11、F5刷新、退格键      function   document.oncontextmenu(){event.returnValue=false;}//屏蔽鼠标右键    function   wi
获得iframe中的控件值
win的小屋
08-19 2914
例如：有一个iframe,index.cgi页面中有很多控件，其中以一个隐藏按钮举例，如果想获得index.cgi中的value值； 可以这样操作：var frame1 =getAllDevice;  //getAllDevice是iframe的id
html+cgi上传图片
win的小屋
11-30 2687
//注意：此文章是本人为了记载用的，大家只供参考不要COPY，因为没用滴，如有不明白之处可以留言 //html文件         Test Upload           function uploadTheme(){  var form1=document.getElementById("form1");  form1.action="back/upl
css 折角圆角矩形
最新发布
10-18
要实现折角圆角矩形，可以使用 CSS3 的 border-radius 属性和 transform 属性。具体实现方法如下： 1. 首先设置一个矩形的 div 元素，设置宽度、高度、背景颜色等属性。 2. 使用 border-radius 属性设置四个角的...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值