一些拐角的设计，收藏希望以后可以用到！
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" >
<head>
<meta http-equiv="Content-Type" content="application/xhtml+xml; charset=UTF-8" />
<title>纯CSS模拟不同的拐角效果 - Flywe の Blog</title>
<meta name="Author" content="Stu Nicholls" />
<style type="text/css">
body {background:#e0e0e0;}
/* Inset 3D Raised */
.raised {background: transparent; width:40%;}
.raised h1, .raised p {margin:0 10px;}
.raised h1 {font-size:2em; color:#fff;}
.raised p {padding-bottom:0.5em;}
.raised .b1, .raised .b2, .raised .b3, .raised .b4, .raised .b1b, .raised .b2b, .raised .b3b, .raised .b4b {display:block; overflow:hidden; font-size:1px;}
.raised .b1, .raised .b2, .raised .b3, .raised .b1b, .raised .b2b, .raised .b3b {height:1px;}
.raised .b2 {background:#ccc; border-left:1px solid #fff; border-right:1px solid #eee;}
.raised .b3 {background:#ccc; border-left:1px solid #fff; border-right:1px solid #ddd;}
.raised .b4 {background:#ccc; border-left:1px solid #fff; border-right:1px solid #aaa;}
.raised .b4b {background:#ccc; border-left:1px solid #eee; border-right:1px solid #999;}
.raised .b3b {background:#ccc; border-left:1px solid #ddd; border-right:1px solid #999;}
.raised .b2b {background:#ccc; border-left:1px solid #aaa; border-right:1px solid #999;}
.raised .b1 {margin:0 5px; background:#fff;}
.raised .b2, .raised .b2b {margin:0 3px; border-width:0 2px;}
.raised .b3, .raised .b3b {margin:0 2px;}
.raised .b4, .raised .b4b {height:2px; margin:0 1px;}
.raised .b1b {margin:0 5px; background:#999;}
.raised .boxcontent {display:block; background:#ccc; border-left:1px solid #fff; border-right:1px solid #999;}
/* Inset 3D Curved */
.inset {background: transparent; width:40%;}
.inset h1, .inset p {margin:0 10px;}
.inset h1 {font-size:2em; color:#fff;}
.inset p {padding-bottom:0.5em;}
.inset .b1, .inset .b2, .inset .b3, .inset .b4, .inset .b1b, .inset .b2b, .inset .b3b, .inset .b4b {display:block; overflow:hidden; font-size:1px;}
.inset .b1, .inset .b2, .inset .b3, .inset .b1b, .inset .b2b, .inset .b3b {height:1px;}
.inset .b2 {background:#ccc; border-left:1px solid #999; border-right:1px solid #aaa;}
.inset .b3 {background:#ccc; border-left:1px solid #999; border-right:1px solid #ddd;}
.inset .b4 {background:#ccc; border-left:1px solid #999; border-right:1px solid #eee;}
.inset .b4b {background:#ccc; border-left:1px solid #aaa; border-right:1px solid #fff;}
.inset .b3b {background:#ccc; border-left:1px solid #ddd; border-right:1px solid #fff;}
.inset .b2b {background:#ccc; border-left:1px solid #eee; border-right:1px solid #fff;}
.inset .b1 {margin:0 5px; background:#999;}
.inset .b2, .inset .b2b {margin:0 3px; border-width:0 2px;}
.inset .b3, .inset .b3b {margin:0 2px;}
.inset .b4, .inset .b4b {height:2px; margin:0 1px;}
.inset .b1b {margin:0 5px; background:#fff;}
.inset .boxcontent {display:block; background:#ccc; border-left:1px solid #999; border-right:1px solid #fff;}
/* Curved cutout Borders*/
.curved {background: transparent; width:40%;}
.curved h1, .curved p {margin:0 10px;}
.curved h1 {font-size:2em; color:#fff;}
.curved p {padding-bottom:0.5em;}
.curved .b1, .curved .b2, .curved .b3, .curved .b4 {display:block; overflow:hidden; height:1px; font-size:1px;}
.curved .b2, .curved .b3, .curved .b4 {background:#e0cea3; border-left:1px solid #fff; border-right:1px solid #fff;}
.curved .b1 {margin:0 4px; background:#fff;}
.curved .b2 {margin:0 4px; height:2px;}
.curved .b3 {margin:0 3px;}
.curved .b4 {margin:0; height:1px; border-width:0 3px 0 3px;}
.curved .boxcontent {display:block; background:#e0cea3; border:0 solid #fff; border-width:0 1px;}
/* flared serif */
.serif {background: transparent; width:40%;}
.serif h1, .serif p {margin:0 10px;}
.serif h1 {font-size:2em; color:#fff;}
.serif p {padding-bottom:0.5em;}
.serif .b1, .serif .b2, .serif .b3, .serif .b4 {display:block; overflow:hidden; font-size:1px;}
.serif .b1, .serif .b2, .serif .b3 {height:1px;}
.serif .b2, .serif .b3 {background:#fc0; border-left:1px solid #fff; border-right:1px solid #fff;}
.serif .b4 {background:#fc0; border-left:1px solid #fff; border-right:1px solid #fff;}
.serif .b1 {margin:0; background:#fff;}
.serif .b2 {margin:0 1px; border-width:0 2px;}
.serif .b3 {margin:0 3px;}
.serif .b4 {height:2px; margin:0 4px;}
.serif .boxcontent {display:block; background:#fc0; border-left:1px solid #fff; border-right:1px solid #fff; margin:0 5px;}
/* Pillar type */
.pillar {background: transparent; width:40%;}
.pillar h1, .pillar p {margin:0 10px;}
.pillar h1 {font-size:2em; color:#fff;}
.pillar p {padding-bottom:0.5em;}
.pillar .b1, .pillar .b2, .pillar .b3, .pillar .b4 {display:block; overflow:hidden; font-size:1px;}
.pillar .b1, .pillar .b2, .pillar .b4 {height:1px;}
.pillar .b2, .pillar .b3 {background:#d66; border-left:1px solid #fff; border-right:1px solid #fff;}
.pillar .b4 {background:#d66; border-left:4px solid #fff; border-right:4px solid #fff;}
.pillar .b1 {margin:0 2px; background:#fff;}
.pillar .b2 {margin:0 1px; border-width:0 1px;}
.pillar .b3 {height:2px; margin:0;}
.pillar .b4 {margin:0 2px;}
.pillar .boxcontent {display:block; background:#d66; border-left:1px solid #fff; border-right:1px solid #fff; margin:0 5px;}
</style>
</head>
<body>
<h2 class="bxs">Krazy Korners</h2>
<h3>by Stu Nicholls</h3>
<div class="curved">
<b class="b1"></b><b class="b2"></b><b class="b3"></b><b class="b4"></b>
<div class="boxcontent">
<h1>Example 1</h1>
<p>A box with cutout corners</p>
</div>
<b class="b4"></b><b class="b3"></b><b class="b2"></b><b class="b1"></b>
</div>
<p></p>
<div class="serif">
<b class="b1"></b><b class="b2"></b><b class="b3"></b><b class="b4"></b>
<div class="boxcontent">
<h1>Example 2</h1>
<p>Corners to give a serif effect.</p>
</div>
<b class="b4"></b><b class="b3"></b><b class="b2"></b><b class="b1"></b>
</div>
<p></p>
<div class="pillar">
<b class="b1"></b><b class="b2"></b><b class="b3"></b><b class="b2"></b><b class="b4"></b>
<div class="boxcontent">
<h1>Example 3</h1>
<p>Corners to give a rounded pillar effect.</p>
</div>
<b class="b4"></b><b class="b2"></b><b class="b3"></b><b class="b2"></b><b class="b1"></b>
</div>
<p></p>
<div class="raised">
<b class="b1"></b><b class="b2"></b><b class="b3"></b><b class="b4"></b>
<div class="boxcontent">
<h1>Example 4</h1>
<p>Rounded corners with raised borders</p>
</div>
<b class="b4b"></b><b class="b3b"></b><b class="b2b"></b><b class="b1b"></b>
</div>
<p></p>
<div class="inset">
<b class="b1"></b><b class="b2"></b><b class="b3"></b><b class="b4"></b>
<div class="boxcontent">
<h1>Example 5</h1>
<p>Rounded corners with inset borders</p>
</div>
<b class="b4b"></b><b class="b3b"></b><b class="b2b"></b><b class="b1b"></b>
</div>
</body>
</html>
研究一下，这种方式主要是遮罩的形式实现圆角的。
分享到：
相关推荐
《PCB设计经验总结》 PCB（Printed Circuit Board，印制电路板）是电子产品中的核心组件，它承载并连接各种电子元件，确保电路的正常运行。良好的PCB设计对于电子设备的性能至关重要。本文将结合作者多年的设计经验...
- 长廊和拐角设计：廊道延伸并垂直转折，增加了空间层次感。 - 半圆形拱门：高大的拱门连接或垂直交接，创造出独特的视觉效果。 - 穿凿和镂空：墙面的巧妙处理形成别致的景致。 地中海风格的建筑通常选用红瓦白墙，...
自动布线参数包括布线层面、布线优先级、走线宽度、布线的拐角模式，过孔类型和尺寸等等。当这些参数设定以后，自动布线器就会根据这些布线规则来进行布线。 4.2.5 自动布线 自动布线的方法很灵活，用户可以根据...
- 设计细节应在边框、按钮和标题装饰块上展现，拐角曲线不超过18像素，并保持页面一致性。 - 主要栏目间保持一致的布局、导航形式和按钮设计，首页可以有变化以突出特色。 2. **分辨率兼容**： - 考虑到常见的...
Protel 99 SE是一款广泛应用于电子设计领域的软件，它提供了印制电路板（PCB）设计和仿真的功能。本教程重点讲解了PCB设计规则及其应用技巧，旨在帮助用户提升PCB设计的效率和质量。 PCB设计规则是指导布局、布线等...
- **流道拐角**：添加适当的圆角以减少应力集中，防止塑料断裂。 - **定位环**：根据注塑机规格和模具结构设计，确保模具安装精确。 - **压力传递**：保持流道的温度和压力损失最小，保证压力有效地传递至型腔。 综...
《EMC经典收藏》是一个包含了丰富的PCB设计中关于电磁兼容（EMC）和电磁干扰（EMI）的参考资料集合。这些资料对于电子工程师来说至关重要，因为EMC和EMI是确保电路板正常运行和避免信号干扰的关键因素。在PCB设计...
- 设计细节如拐角应体现技巧，但最大不超过18像素，保持一致性。 - 各主要栏目间应有统一的布局、导航和按钮设计，首页应包含网站LOGO，并链接回首页。 - 兼容800*600分辨率，但建议使用778或760像素宽度以增强...
布线规则涉及导线宽度、拓扑、优先级、层别、拐角、过孔、扇出布线、差分对等，确保布线的美观和高效。 自动布线策略设置允许设计师定义布线顺序、优先级和布线路径，以满足特定的设计需求。自动布线后，通常需要...
2. 进行拐角切削时，应**降低**进给速度，以减少切削力和改善加工质量。 3. 在高精度的闭环数控机床上，定位精度主要取决于**伺服系统的精度**。 4. PLC（可编程逻辑控制器）的编程语言通常包括**语句表**、梯形图和...
导线拐角应采用圆角设计以优化电气性能。在双面板设计中，两面的导线应避免平行，以防寄生耦合，推荐采用垂直、斜交或弯曲走线。同时，合理布线能有效抑制干扰，例如，电源线和信号线应避免并行，必要时添加隔离线或...
4. **少拐角**：尽量减少通道中的转角，如果必须转弯，应通过商品陈列线来缓解。 5. **光照充足**：通道的照明要高于卖场的平均水平，至少达到1000勒克斯，以保证顾客的舒适感。 6. **无障碍物**：通道内不应放置...
手册不仅关注了广告要素的应用，如电视、报纸、杂志等不同媒介的广告商标风格，还包括卖场设计和展示规划，如背板、拐角、新品展示等，以确保品牌在销售终端的呈现效果。 综上所述，海信新形象战略工程是海信集团...
通常，高利润商品或者消费者日常生活中必需的商品会被放置在显眼的位置，如超市的入口处、通道的拐角或结账区附近。这样做的目的是为了确保这些商品能够被尽可能多的顾客看到，增加其被购买的机率。个性化陈列则是...
在平面和空间组合上，窑洞以单孔为主，可以并联、套用或拐角布局，如两窑并联、三窑并联、套窑、拐窑、母子窑等。常见的组合形式有三窑并联的“一堂两卧”，中间为堂屋，两边为卧室，既实用又灵活。此外，窑洞的院落...
必须严格按照设计和规范施工，对材料、结构稳定性、验收环节进行严格把控，避免安全隐患。 综上所述，建筑安全现场管理涉及多个方面，包括脚手架的材料质量、结构稳定、分段验收，以及支撑架的荷载传递、剪刀撑设置...
点赞、收藏和分享功能也可能被集成，增强用户间的互动性。 8. **安全防护** 为防止SQL注入和XSS攻击，程序应进行输入验证和输出过滤，同时使用预编译语句或参数绑定来处理用户输入。 9. **性能优化** 通过缓存...