原来用CSS可以设置圆角的方块。
究其原理，是用3条长度不同的直线（或更多）叠在一起，模拟出这个弯曲的圆角，正如多边形可以组成圆形一样，只要边够多，就可以无限逼近一个圆。
===============================================================
附网上找到的示例
<html>
<head>
<title> 用CSS做圆角方块</title>
<style type="text/css">
.roundBorder
{
display: block;
}
.roundBorder *
{
background: white;
display: block;
height: 1px;
overflow: hidden;
}
.roundBorderLayer1
{
border-left: 1px solid #C4C4C4;
border-right: 1px solid #C4C4C4;
margin: 0px 1px;
}
.roundBorderLayer2
{
border-left: 1px solid #D3D4D5;
border-right: 1px solid #D3D4D5;
margin: 0px 2px;
padding: 0px;
}
.roundBorderLayer3
{
background: #C4C4C4;
border-left: 1px solid #D3D4D5;
border-right: 1px solid #D3D4D5;
margin: 0px 3px;
}
.roundContent
{
background:white;
border-left: 1px solid #C4C4C4;
border-right: 1px solid #C4C4C4;
overflow: hidden;
padding: 4px 10px;
}
</style>
</head>
<body>
<b class="roundBorder">
<b class="roundBorderLayer3"></b>
<b class="roundBorderLayer2"></b>
<b class="roundBorderLayer1"></b>
</b>
<div class="roundContent">
Hello!!
<br/>
用CSS做圆角方块
<br/>
真的很简单
</div>
<b class="roundBorder">
<b class="roundBorderLayer1"></b>
<b class="roundBorderLayer2"></b>
<b class="roundBorderLayer3"></b>
</b>
</body>
</html>
分享到：
相关推荐
在标签部分，“圆角层css.rar 圆角层 css 圆角层css”再次强调了主题，表明这个压缩包与CSS圆角技术相关。 根据提供的文件名“圆角层css”，我们可以推测压缩包内可能有一个名为“圆角层css”的文件，这可能是一个...
CSS3引入了更精确的选择器，如类选择器（`.class`）、ID选择器（`#id`）、属性选择器（`[attribute]`）等，以帮助我们更好地定位和操作DOM元素，比如我们可以用`.cube`作为悬浮立体方块的类名。 2. **盒模型**：...
这里的`.ball`类设置了小球的基本样式，如大小、颜色和圆角。然后通过`animation`属性，我们指定了动画的名称、持续时间、缓动函数（控制速度变化）和无限循环。 为了实现方块到小球的变换，可能还会使用到CSS3的伪...
6. **透明度与混合模式**：`opacity`属性可以设置元素的整体透明度，而`mix-blend-mode`允许元素与其他元素或背景进行混合，产生不同寻常的视觉效果。 在这个特效中，可能的实现方式是： 1. 创建一个或多个方形...
2. **边框与圆角**：CSS3允许我们设置圆角边框，无需使用图片或额外的HTML元素。`border-radius`属性可实现这一效果，让方块变得柔和。 3. **渐变**：`linear-gradient`和`radial-gradient`函数创建线性或径向渐变...
当触发事件（如鼠标悬停）时，我们可以设置3D翻转动画的持续时间、延迟和速度曲线。 4. **CSS3选择器**：更精确地选择元素，如`:hover`伪类，可以控制翻转动画何时开始。当鼠标悬停在方块上时，应用翻转效果。 5. ...
2. **透明度和rgba()颜色值**：CSS3允许我们通过`opacity`属性设置元素的透明度，或者使用`rgba()`函数指定颜色的同时控制透明度，这样可以创建出半透明的方块效果。 3. **盒阴影（box-shadow）**：通过`box-shadow...
为了创建更复杂的“圆点线条方块图标”加载效果，我们可能需要结合使用多种CSS3属性，如`transform`（用于改变元素的形状、尺寸、位置等）、`border-radius`（用于创建圆角）、`box-shadow`（用于添加阴影效果）以及...
为了实现圆角效果，我们实际上是在方块的四个角上分别构造了四个小的方块，这些小方块的宽度被设置为1像素。通过调整这四个小方块的边框颜色和宽度，以及通过相对定位将它们放置到合适的位置，就可以形成一个视觉上...
3. **边框和圆角**：`border`属性可以添加边框，`border-radius`则可以制作圆角效果，增强按钮的视觉吸引力。 ```css .menu a { border: 1px solid #222; border-radius: 4px; } ``` 4. **悬停状态**：利用`:...
1. **CSS3**：CSS3是层叠样式表的第三个版本，相比之前的2.1版本，它引入了许多新的特性和功能，如选择器、动画、过渡、阴影、圆角、多背景等，大大增强了网页的视觉表现力。在这个特效中，CSS3的主要作用是定义方块...
5. **参数设置**：插件可能接受各种参数，如圆角大小、阴影效果等，可以根据需求进行配置。 6. **兼容性处理**：一些插件会自动检测浏览器是否支持CSS3，并在必要时使用JavaScript模拟圆角。 **示例代码** 一个...
例如，以下代码将创建一个具有4个相同圆角的方块： ```css .box { width: 200px; height: 200px; background-color: #f00; border-radius: 20px; /* 所有边角的圆角半径均为20px */ } ``` 然而，老版本的...
CSS3引入了`border-radius`属性，允许我们为元素的每个角落设置不同的圆角半径，从而创造出平滑的圆形或椭圆形边缘。通过调整这个属性，我们可以创建出不同角度的折角效果。 2. **阴影（box-shadow）** `box-...
2. **透明度（Opacity）和 RGBA 颜色**：CSS3允许我们设置元素的透明度，通过opacity属性或者使用RGBA颜色值（包括红、绿、蓝和透明度四个通道），可以创建出透明的方块效果。在这个登录框中，方块可能通过调整透明...
在CSS3中，我们可以利用`background-color`属性来设置元素的背景色，或者使用`linear-gradient`来创建渐变背景，增加视觉层次感。例如： ```css .box { background-color: #00BFFF; /* 或者使用渐变背景 */ ...
`border-radius`属性是创造圆形和椭圆的基础，只需设置合适的半径值，一个简单的方块就能变成各种形状的圆角。更进一步，通过设置不同边的半径，我们可以创造出复杂的不规则形状。 其次，`transform`属性提供了旋转...
在登录表单方面，CSS3不仅可以美化表单元素的样式，如`border-radius`用于创建圆角，`box-shadow`添加阴影效果，还能利用`input[type="text"]`等选择器对不同类型的输入框进行特定样式定制。此外，`placeholder`属性...