css圆角效果

最新推荐文章于 2024-08-29 14:28:28 发布
最新推荐文章于 2024-08-29 14:28:28 发布
阅读量166 收藏
点赞数
分类专栏： js css 文章标签： xhtml php javascript ViewUI
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/iteye_20782/article/details/82207597
版权
js 同时被 2 个专栏收录
2 篇文章 0 订阅
订阅专栏
css
2 篇文章 0 订阅
订阅专栏
用CSS样式，比js好

有的浏览器会禁止执行脚本，那样就无效了

CSS就不会

<html>

<head>

<title>css圆角效果</title>

<meta http-equiv="content-type" content="text/html; charset=gb2312">

<style type="text/css">

div.RoundedCorner{background: #9BD1FA}

b.rtop, b.rbottom{display:block;background: #FFFFFF}

b.rtop b, b.rbottom b{display:block;height: 1px;overflow: hidden; background: #9BD1FA}

b.r1{margin: 0 5px}

b.r2{margin: 0 3px}

b.r3{margin: 0 2px}

b.rtop b.r4, b.rbottom b.r4{margin: 0 1px;height: 2px}

</style>

</head>

<body>

<div class="RoundedCorner">

<b class="rtop"><b class="r1"></b><b class="r2"></b><b class="r3"></b><b class="r4"></b></b>

无图片实现圆角框

<b class="rbottom"><b class="r4"></b><b class="r3"></b><b class="r2"></b><b class="r1"></b></b>

</div>

<br>

<div class="RoundedCorner">

<b class="rtop"><b class="r1"></b><b class="r2"></b><b class="r3"></b><b class="r4"></b></b>

<br>无图片实现圆角框<br><br>

<b class="rbottom"><b class="r4"></b><b class="r3"></b><b class="r2"></b><b class="r1"></b></b>

</div>

</body>

</html>

=================================================================

另外一种实现方式

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">

<!-- saved from url=(0046)http://longbill.cn/down/sample/roundcorner.htm -->

<HTML><HEAD>

<META http-equiv=Content-Type content="text/html; charset=gb2312">

<STYLE>BODY {

FONT-SIZE: 12px; COLOR: #333333; TEXT-ALIGN: center

}

.round {

DISPLAY: inline; MARGIN: 5px; WIDTH: 200px; BACKGROUND-COLOR: lightblue

}

</STYLE>

<META content="MSHTML 6.00.2900.2802" name=GENERATOR></HEAD>

<BODY>

<DIV id=title style="MARGIN: 5px; WIDTH: 500px; BACKGROUND-COLOR: #e9afdf">

<DIV

style="PADDING-RIGHT: 3px; PADDING-LEFT: 3px; PADDING-BOTTOM: 3px; PADDING-TOP: 3px">自动圆角函数<BR>作者</DIV></DIV>

<DIV class=round id=round1>

<DIV

style="PADDING-RIGHT: 3px; PADDING-LEFT: 3px; PADDING-BOTTOM: 3px; PADDING-TOP: 3px">样式1</DIV></DIV>

<DIV class=round id=round2>

<DIV

style="PADDING-RIGHT: 3px; PADDING-LEFT: 3px; PADDING-BOTTOM: 3px; PADDING-TOP: 3px">样式2</DIV></DIV><BR>

<DIV class=round id=round3>

<DIV

style="PADDING-RIGHT: 3px; PADDING-LEFT: 3px; PADDING-BOTTOM: 3px; PADDING-TOP: 3px">样式3</DIV></DIV>

<DIV class=round id=round4>

<DIV

style="PADDING-RIGHT: 3px; PADDING-LEFT: 3px; PADDING-BOTTOM: 3px; PADDING-TOP: 3px">样式4</DIV></DIV>

<DIV id=a style="MARGIN: 5px; WIDTH: 500px; BACKGROUND-COLOR: #e9afdf">

<DIV

style="PADDING-RIGHT: 3px; PADDING-LEFT: 3px; PADDING-BOTTOM: 3px; PADDING-TOP: 3px">说明:<BR>RoundCorner("欲圆角的元素ID"

[, 圆角样式 ]);<BR>圆角样式:可选参数,暂时有4种 </DIV></DIV>

<SCRIPT>

RoundCorner("round1",1);

RoundCorner("round2",2);

RoundCorner("round3",3);

RoundCorner("round4",4);

RoundCorner("a",1);

RoundCorner("title",1);

function RoundCorner(obj,style)

{ var r = [];

var styles = [

{top:["0 5px","0 3px","0 2px","0 1px","0 1px"],bottom:["0 1px","0 1px","0 2px","0 3px","0 5px"]},

{top:["0 5px","0 3px","0 2px","0 1px","0 1px"],bottom:["0px","0px","0px","0px","0px"] },

{top:["0 0 0 5px","0 0 0 3px","0 0 0 2px","0 0 0 1px","0 0 0 1px"],bottom:["0 1 0 0px","0 1 0 0px","0 2 0 0px","0 3 0 0px","0 5 0 0px"]},

{top:["0 5 0 0px","0 3 0 0px","0 2 0 0px","0 1 0 0px","0 1 0 0px"],bottom:["0 0 0 1px","0 0 0 1px","0 0 0 2px","0 0 0 3px","0 0 0 5px"]}

]; //author: longbill.cn

if (!style || style>styles.length) style = 1;

style--;

var btop = styles[style].top,bbottom = styles[style].bottom;

obj = document.getElementById(obj);

if (!obj) return;

var HTML = obj.innerHTML;

obj.innerHTML = "";

for(var istop=1;istop>=0;istop--)

{

var topborder = document.createElement("b");

topborder.style.display = "block";

topborder.style.height = "2px";

topborder.style.backgroundColor = (obj.parentNode.style.backgroundColor)?obj.parentNode.style.backgroundColor:"#FFFFFF";

for(var i=0;i<btop.length;i++)

{

var b = document.createElement("b");

if (obj.style.backgroundColor)

b.style.backgroundColor = obj.style.backgroundColor;

else if (obj.className)

b.className = obj.className;

b.style.display = "block";

b.style.margin = (istop)?btop[i]:bbottom[i];

b.style.height = "1px";

b.style.overflow = "hidden";

b.style.width = "auto";

topborder.appendChild(b);

}

obj.appendChild(topborder);

if (istop) obj.innerHTML+=HTML;

}

}

</SCRIPT>

</BODY></HTML>

=================================================================

<!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=gb2312" />

<meta http-equiv="Content-Language" content="zh-CN" />

<meta name="robots" content="all" />

<meta name="author" content="lybykw | www.vistathink.com" />

<meta name="Copyright" content="Copyright (c) 2000-2005 www.vistathink.com" />

<link rel="icon" href="/favicon.ico" type="image/x-icon" media="screen" />

<link rel="shortcut icon" href="/favicon.ico" type="image/x-icon" media="screen" />

<meta name="description" content="网页制作" />

<meta name="keywords" content="展望理想,中国网站资源,刘月波,制作,波波工作室,天翼数码,网站制作,Falsh,下载,成都,多媒体制 作,asp,jsp,php,sql,mssql,mysql,酷网站,图标,音乐,mp3" />

<link rel="stylesheet" href="/css/main.css" type="text/css" media="all" />

<script type="text/javascript" src="/public/js/main.js"></script>

<style type="text/css">

<!--

body {font-size:12px;}

.round1 { border:1px solid #AFE8E1; background-color:#fff; position:relative;}

.round1 .tl,.round1 .tr,.round1 .bl,.round1 .br { width:5px; height:5px; overflow:hidden; position:absolute; background:url(http://cn.yimg.com/i/ks/060928/bgcorn.gif) no-repeat;}

.round1 .tl { left:-1px; top:-1px; _top:0;}

.round1 .tr { right:-1px; top:-1px; _top:0; background-position:-4px 0;}

.round1 .bl { left:-1px; bottom:-1px; background-position:0 -4px;}

.round1 .br { right:-1px; bottom:-1px; background-position:-4px -4px;}

.ovt ul { margin:0; padding:0; }

.ovt li {background:url(http://cn.yimg.com/i/ks/060928/br.gif) right no-repeat; height:22px; line-height:22px; list-style:none; float:left; color:#088;}

.ovt span { background:url(http://cn.yimg.com/i/ks/060928/bl.gif) left no-repeat; display:block; padding:0 1em 0 .5em;}

-->

</style>

<script language="javascript">

<!--

//-->

</script>

</head>

<body>

<br><br><br><br><br>

<div class="p100">

<div class="round1">

<div class="tl"></div>

<div class="tr"></div>

<div class="bl"></div>

<div class="br"></div>

<div style=" position:absolute; top:-35px; _top:-22px; left:-25px;">

<ul class="ovt">

<li><span><img name="" src="" width="1" height="22" align="absmiddle" />

<img src="http://cn.yimg.com/i/ks/060928/tab_knowledge.gif" hspace="3" />知识 </span></li>

</ul>

</div>

<div style="padding:10px;">通过下列链接访问参考资料，可帮助你创建引人注目的 Web 页面。<br>动态 HTML (DHTML) 对象模型参考<br></div>

</div>

</div>

</body>

</html>
iteye_20782
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
工具篇——RoundCornerDialog（圆角的dialog）
一个灵活的胖子MrWang
05-09 917
写代码的四点： 1.明确需求。要做什么？ 2.分析思路。要怎么做？（1,2,3……） 3.确定步骤。每一个思路要用到哪些语句、方法和对象。 4.代码实现。用具体的语言代码将思路实现出来。学习新技术的四点： 1.该技术是什么？ 2.该技术有什么特点？（使用需注意的方面） 3.该技术怎么使用？（写Demo） 4.该技术什么时候用？（在Pr...
css 实现 round corner
beimuaihui的专栏
02-18 1040
 1. 利用4每个div左右的margin分别为5,3,2,1,合在一起组成上面div的corner,下面为1,2,4,5 参见：http://webstudio.gordw.com/roundcorner.htmlhttp://www.tjkdesign.com/articles/roundbox.asphttp://www.tjkdesign.com/articles/roundb
Round Corner
diandian82的专栏
02-02 710
 html Code:                                                                                                     Welcome to round corner                                 
CSS实现圆角的 25 种技巧分享
水墨熊猫
05-20 1224
原文地址：http://www.devwebpro.com/25-rounded-corners-techniques-with-css/ * This post is regularly updated. *Rounded corners is one of the most popular and frequently requested CSS techniques
css圆角三角形3个圆角_CSS圆角
culuo8053的博客
07-30 1139
css圆角三角形3个圆角The ability to create rounded corners with CSS opens the possibility of subtle design improvements without the need to include images. CSS rounded corners thus save us time in creating im...
css2.0圆角,CSS圆角效果-CSS3常用属性集合
weixin_32364911的博客
08-04 410
CSS3使用注意项：早期的firefox chrome 等某些游览器中也实现了部分CSS3，所以为了兼容部分，在CSS3中的编写，需要如此：{-moz-border-radius: 4px; -webkit-border-radius: 4px;border-radius:4px;}{moz内核游览器，webkit内核游览器，IE9}Web2.0中，圆角效果是很常见的，以前都是用图片来模仿，现在直...
css 圆角效果
Code-lover's Learning Notes
07-14 667
-webkit-border-radius：苹果；谷歌，等一些浏览器认，因为他们都用的是webkit内核； -moz-border-radius：moz这个属性 主要是专门支持Mozilla Firefox 火狐浏览器的CSS属性。 在这两个属性有值的时候，去掉哪个属性，对用他们做内核的浏览器就有影响，如果没值的话，就没影响，这两个属性和，IE，和360没关系。不删除的话影响微乎其微. bo
CSS圆角效果
06-12
这个"CSS圆角效果"是一个经典案例，它展示了如何使用CSS来创建具有圆角的元素，而无需使用图片或者JavaScript。 在CSS3之前，要创建圆角效果通常需要使用切角图片或者复杂的背景图像定位技巧，这不仅增加了页面加载...
用js实现的抽象CSS圆角效果!!
10-30
在本文中，我们将探讨如何使用JavaScript来实现抽象的CSS圆角效果，从而创建一个可复用且灵活的组件。CSS圆角效果通常通过CSS3的`border-radius`属性来实现，但在不支持此属性的老版本浏览器中，我们需要采取其他...
提取自百度有啊的css圆角效果
09-06
本案例中提到的“提取自百度有啊的css圆角效果”就是一种利用图片和CSS结合的方式来实现圆角的方法。 这种方法通常被称为“图像切角”或“图片拼接法”。核心思想是通过四个小的背景图像（左上角、右上角、左下角和...
CSS圆角效果（无背景图片）
05-12
在网页设计中，CSS圆角效果是常见的视觉优化手段，它可以为元素添加平滑的边缘，使得用户界面更加美观和现代。"CSS圆角效果（无背景图片）"的主题着重于如何利用纯CSS和JavaScript技术来实现这一效果，而无需依赖...
在线生成图标透明圆角工具 - aTool在线工具
weixin_34116110的博客
01-22 1518
2019独角兽企业重金招聘Python工程师标准>>> ...
android 裁剪gif,android圆角功能,非常好用，可以用在图片，视频，gif等上面
weixin_29280657的博客
05-27 588
importandroid.content.Context;importandroid.content.res.TypedArray;importandroid.graphics.Canvas;importandroid.graphics.Color;importandroid.graphics.Paint;importandroid.graphics.Path;importandroid.gra...
使用itextpdf5.x将网页转为PDF,并添页眉页脚页码
qingqingzijinxin的专栏
08-23 334
itextpdf，html转pdf
使用 树莓派3B+ 对日本葡萄园进行经济实惠的环境监测
最新发布
EDATEC的博客
08-29 797
然而，他也热衷于酿造 “优质葡萄酒”，随着他所居住的东京北部胜沼地区葡萄酒旅游业的兴起，他感觉到了商机。菊岛热衷于在他所谓的 “Hinno ”物联网系统中使用太阳能，日语中的 “Hinno ”表明这是一种简单的农民葡萄栽培方法，因为太阳能还可以用来为电栅栏供电，防止动物靠近作物。他还可以在办公室里随时观察大气状况。对于 菊岛邦夫—Vineyard Kikushima 而言，Raspberry Pi 生态系统提供了支持和信息，通过基于温度和湿度监测的有针对性的最低限度杀虫剂方案，来提高葡萄的健康产量。
Nginx的lnmp服务搭建
2201_75745826的博客
08-29 729
nginx是一款功能强大的web服务器。和apache一样，有http和https两个服务。nginx功能强大，且库使用第三方模块，正反向代理等。Nginx默认采用多进程工作方式，Nginx启动后，会运行一个master进程和多个worker进程。其中master充当整个进程组与用户的交互接口，同时对进程进行监护，管理worker进程来实现重启服务、平滑升级、更换日志文件、配置文件实时生效等功能。worker用来处理基本的网络事件，worker之间是平等的，他们共同竞争来处理来自客户端的请求。
【Linux篇】网络请求和下载与端口
2301_80912559的博客
08-26 1126
如图，计算机A的微信连接计算机B的微信，A使用的50001即动态端口，临时找一个端口作为出口。计算机B的微信使用端口5678，即注册端口，长期绑定此端口等待别人连接。在win系统中，可以通过任务管理器选择进程后，点击结束进程从而关闭。IP地址相当于小区地址，在小区内可以有很多住户（程序）而门牌号（端口）就是各个住户（程序）的联系地址。为管理运行的程序，每一个程序在运行的时候，便被操作系统注册为系统中的一个进程。计算机程序之间的通讯，通过IP只能锁定计算机，但是无法锁定具体的程序。
第三章 封装与继承
weixin_65279640的博客
08-28 1074
面向对象三大特征之一 ——封装概念：将类的某些信息隐藏在类内部，不允许外部程序直接访问，而是通过该类提供的方法来实现对隐藏信息的操作和访问把尽可能多的东西藏起来，对外提供便捷的接口。说白了就是把对象中的属性信息封装在对象类内部，不让用户直接使用类属性进行访问，而是定义一个方法作为类属性的接口提供给用户访问使用。封装的两个大致原则把所有的属性藏起来把尽可能多的东西藏起来，对外提供便捷的接口。
Upload-Lab第20关：如何利用文件名可控漏洞？
didiplus
08-27 335
在Upload-Lab的第20关中，系统没有对上传文件的内容进行验证，而是仅对用户输入的文件名进行了检查。具体来说，系统使用文件后缀名的黑名单进行过滤，但由于上传的文件名是用户可控的，这为绕过机制提供了可能性。此外，函数还有一个特性，即它会忽略文件名末尾的/.，这可以被利用来绕过后缀名的黑名单检查，从而上传恶意文件。通过这一关的学习，我们可以深入理解 Apache 配置文件的作用及其在安全防护中的重要性。同时，这也提醒我们在设计和开发上传功能时，必须考虑到所有可能的攻击面，确保服务器配置的安全性和稳健性。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值