一些拐角的设计，收藏希望以后可以用到！
<!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. **性能优化** 通过缓存...