`

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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style type="text/css">  
.r_top, .r_bottom {display:block; background:transparent; font-size:1px}/*左上右上角和左下右下角的容器*/
.r_a, .r_b, .r_c, .r_d {display:block; overflow:hidden}/*四个圆角*/
.r_a, .r_b, .r_c{height:1px}
.r_b, .r_c, .r_d, .box{background:#000}
.r_a {margin:0 5px}
.r_b {margin:0 3px; border-width:0 2px}
.r_c {margin:0 2px}
.r_d {height:2px; margin:0 1px} 
.box{
	color:#fff;
}
</style>
</head>
<body>
<!--左上角/右上角-->
<div class="r_top"><em class="r_a"></em><em class="r_b"></em><em class="r_c"></em><em class="r_d"></em></div>
<div class="box">
asdfsdf
asdf
asdf
asdf
</div>
<!--左下角/右下角-->
<div class="r_bottom"><em class="r_d"></em><em class="r_c"></em><em class="r_b"></em><em class="r_a"></em></div>
</body>
</html>
 
分享到：
| android > WebView > 布局
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

    圆角矩形代码，HTML圆角矩形

    &lt;title&gt;HTML圆角矩形示例&lt;/title&gt; &lt;style&gt; .round-corner { width: 200px; height: 100px; background-color: #f00; /* 设置背景颜色 */ border-radius: 20px; /* 设置圆角大小 */ } &lt;/style&gt; &lt;/head&gt; ...

    Html+Css圆角,没用图片做背景

    Html+Css圆角,没用图片做背景,可随意改变背景颜色..

    HTML加CSS实现圆角效果

    &lt;p&gt;div + CSS 圆角矩形&lt;/p&gt; &lt;div class="rtop"&gt; &lt;div class="r4"&gt;&lt;/div&gt; &lt;div class="r3"&gt;&lt;/div&gt; &lt;div class="r2"&gt;&lt;/div&gt; &lt;div class="r1"&gt;&lt;/div&gt; &lt;/div&gt; &lt;/div&gt; ``` 这里的 `div#nifty` 是主容器，`div....

    HTML 不用图像文件的圆角解决方法

    &lt;title&gt;HTML 圆角示例&lt;/title&gt; &lt;style&gt; .rounded-corner { width: 200px; height: 100px; background-color: #f0f0f0; border: 1px solid #ccc; border-radius: 20px; } &lt;/style&gt; &lt;/head&gt; &lt;body&gt; ...

    CSS圆角效果（无背景图片）.

    CSS圆角效果是CSS3中的一项重要特性，它允许我们无需借助背景图片就能实现元素边角的圆润化处理，从而为网页界面带来更加美观和现代感的视觉体验。本篇文章将深入探讨如何利用CSS来创建无背景图片的圆角效果。 首先...

    自适应宽度的CSS圆角背景的按钮

    本文将深入探讨如何使用CSS实现自适应宽度的圆角背景按钮。这种技术允许按钮根据其内容自动调整宽度，同时保持其设计的一致性和美观性。 首先，我们需要理解CSS中的圆角属性`border-radius`。这个属性用于给元素的...

    HTML5圆角TAB选项卡，网页TAB标签.rar

    HTML5圆角TAB选项卡，网页TAB标签，代码十分简洁，纯CSS3实现的圆角，点击TAB后内容才切换，非滑动门操作方式。特别是用CSS3实现的圆角和弧形，是亮点，不使用任何图片实现的圆滑网页选项卡效果，同时也是学习HTML5...

    html制作圆角边的复选框

    在HTML中，创建具有圆角边的复选框是一种常见的需求，这主要通过结合HTML、CSS技术来实现。本文将详细讲解如何利用HTML和CSS来创建具有圆角边的复选框，以及相关的技巧和注意事项。 首先，我们需要了解HTML的基本...

    无图片实现圆角框，不需要加入背景图片

    可以实现圆角框背景 &lt;html&gt; &lt;head&gt; &lt;title&gt;css圆角效果&lt;/title&gt; &lt;meta http-equiv="content-type" content="text/html; charset=gb2312"&gt; &lt;style type="text/css"&gt; div.RoundedCorner{background: #9BD1FA} b.rtop, ...

    Jquery实现圆角边框效果的源码

    &lt;title&gt;jQuery圆角边框示例&lt;/title&gt; &lt;script src="path/to/jquery.js"&gt;&lt;/script&gt; &lt;script src="path/to/jquery.curvycorners.min.js"&gt;&lt;/script&gt; &lt;style&gt; .box { width: 200px; height: 100px; background-...

    大红色背景圆角企业博客模板_红色 企业 公司 圆角 博客 整站.zip

    该压缩包文件“大红色背景圆角企业博客模板_红色 企业 公司 圆角 博客 整站.zip”包含了一个完整的企业博客网站设计，主题为大红色背景和圆角元素。这个模板适用于希望打造独特视觉效果，展现企业形象的公司或个人。...

    【转载】透明圆角化背景图片（二）

    【透明圆角化背景图片（二）】 在Web开发中，为元素添加圆角效果是一项常见的需求，可以提升页面的视觉美观度。本篇将详细探讨如何实现透明圆角背景图片，以及涉及到的相关技术点。 一、CSS边框半径（Border ...

    大红色背景圆角企业博客模板_红色企业公司圆角博客整站.rar

    该资源是一个名为“大红色背景圆角企业博客模板_红色企业公司圆角博客整站”的HTML网站模板，压缩包中包含了一系列用于构建博客页面的文件。这个模板特别适合那些希望以鲜明、引人注目的红色调展示其企业形象的公司...

    大红色背景圆角企业博客模板-红色 企业 公司 圆角 博客 整站.rar

    `大红色背景圆角企业博客模板_红色 企业 公司 圆角 博客 整站` 这个文件可能是模板的主HTML文件或者包含所有模板文件的文件夹。如果是一个文件夹，里面可能包含CSS（样式表）、JavaScript（交互逻辑）、图片和其他...

    jQuery圆角背景滑块导航菜单代码

    然后，浏览器将解析HTML，应用CSS样式，并执行JavaScript代码，呈现这个动态的圆角背景滑块导航菜单。 总之，这个项目展示了如何利用jQuery和CSS3来创建一个具有交互性和视觉吸引力的导航菜单。它不仅教授了基本的...

    质感深色背景企业网站模板_白色 背景 圆角 书 个性 企业 渐变 整站 精美_html网站模板_网页源码移动端前端_H.rar

    综上所述，这个压缩包提供的资源是一个综合了深色背景、圆角设计、渐变效果和书籍元素的全站HTML模板，结合CSS和JavaScript技术，实现了一套美观且适应移动端的网站设计方案。开发者可以通过编辑这些源码，根据企业...

    应用源码之创建抗锯齿透明背景圆角图像.rar

    本压缩包文件"应用源码之创建抗锯齿透明背景圆角图像"提供了一种实现这种效果的方法。下面将详细探讨相关知识点。 首先，我们来解释一下"抗锯齿"。抗锯齿技术是为了消除图像边缘的锯齿现象，使得图像在显示时更加...

    高仿京东标题栏圆角背景颜色渐变效果

    2. **SVG Background**：通过SVG的`&lt;linearGradient&gt;`元素也可以实现渐变效果，但这通常适用于图形或更复杂的背景情况，对于简单的标题栏，CSS3方法更为常见。 3. **图片背景**：虽然不是动态的，但可以预先生成一...

    jquery实现圆角实例

    在本实例中，我们将探讨如何利用 jQuery 来实现元素的圆角效果，包括层的圆角和背景的圆角。 首先，要实现 jQuery 圆角功能，我们需要理解 CSS3 的 border-radius 属性，这是原生支持元素圆角的关键。在 CSS3 中，...

    div圆角代码 非常简单的圆角代码

    使用HTML的特殊字符`•`来创建圆角，这种方法的圆角更平滑，但仍然需要无语义标签，结构冗余，颜色调整有限，也不易实现渐变背景。适合对圆角平滑度有一定要求，但颜色需求简单的页面。 3. **图片圆角框**： 这是...

Magicbox
Global site tag (gtag.js) - Google Analytics