<!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=GB2312"/>
<title></title>
<style type="text/css">
html,body{
font-size:12px;
}
.round_border,.round_border b{
display:block;
text-align:center;
}
.round_border_layer3,.round_border_layer2,.round_border_layer1,
.round_border_content{
border:1px solid #c4c4c4;
border-width:0 1px 0 1px;
height:1px;
overflow:hidden;
}
.round_border_layer3{
margin:0 3px;
background:#c4c4c4;
}
.round_border_layer2{
margin:0 2px;
}
.round_border_layer1{
margin:0 1px;
}
.round_border_content{
height:30px;
padding:3px 6px;
}
/*only for better appearance, not necessary, http://wallimn.iteye.com*/
.round_border_layer2,.round_border_layer1{
border-color:#d3d4d5;
}
/*******************control bar**********************/
.controlbar_border_layer3,.controlbar_border_layer2,.controlbar_border_layer1,
.controlbar_border_content{
background:#e9e9e9;
height:1px;
overflow:hidden;
}
.controlbar_border_layer3{
margin:0 3px;
}
.controlbar_border_layer2{
margin:0 2px;
}
.controlbar_border_layer1{
margin:0 1px;
}
.controlbar_border_content{
height:20px;
padding:0 1em;
line-height:20px;
vertical-align:middle;
}
/*only for better appearance, not necessary, http://wallimn.iteye.com*/
.controlbar_border_layer1,..controlbar_border_layer2{
border-color:#f2f2f2;
}
</style>
</head>
<body>
<div style="width:260px;">
<b class="round_border">
<b class="round_border_layer3"></b>
<b class="round_border_layer2"></b>
<b class="round_border_layer1"></b>
</b>
<div class="round_border_content">
<b class="round_border">
<b class="controlbar_border_layer3"></b>
<b class="controlbar_border_layer2"></b>
<b class="controlbar_border_layer1"></b>
</b>
<div class="controlbar_border_content">
隔壁老王
</div>
<b class="round_border">
<b class="controlbar_border_layer1"></b>
<b class="controlbar_border_layer2"></b>
<b class="controlbar_border_layer3"></b>
</b>
</div>
<div class="round_border_content">
<b class="round_border">
<b class="controlbar_border_layer3"></b>
<b class="controlbar_border_layer2"></b>
<b class="controlbar_border_layer1"></b>
</b>
<div class="controlbar_border_content">
隔壁老王
</div>
<b class="round_border">
<b class="controlbar_border_layer1"></b>
<b class="controlbar_border_layer2"></b>
<b class="controlbar_border_layer3"></b>
</b>
</div>
<b class="round_border">
<b class="round_border_layer1"></b>
<b class="round_border_layer2"></b>
<b class="round_border_layer3"></b>
</b>
</div>
</body>
</html>
分享到：
相关推荐
CSS3引入了多种边框样式，如圆角边框、阴影边框和渐变边框，可以为图片添加独特的外观。例如，`border-radius`属性可以创建圆形或椭圆形图片，`box-shadow`则可以制造出立体感的阴影效果，而`border-image`允许我们...
在网页设计中，CSS（Cascading Style Sheets）被广泛用于控制页面的布局和样式，包括背景图的设置。本文将详细讲解如何使用Photoshop来制作适用于CSS网页的背景图，以及如何引用这些样式来实现特定的设计效果。 ...
`border-radius`允许我们将元素的边角设置为圆角或特定形状，比如模拟出一个卡片的边缘翘起的效果。通过调整这个属性的值，我们可以创建从四角到中心逐渐变窄的边角，从而制造出图片边缘微微翘起的视觉效果。同时，...
2. **边框与背景颜色**：通过设置不同的边框宽度、颜色和样式，我们可以制造出边角的立体感。同时，使用渐变背景可以进一步增强折角的立体效果。 3. **定位与绝对定位**：为了让折角元素准确地放置在表格的角落，...
在CSS3中，开发者可以利用一系列先进的特性来创建出各种富有创意和动态效果的界面元素，其中就包括了我们今天要讨论的水墨风格背景动画按钮。这种设计风格将中国传统艺术的水墨元素与现代Web技术相结合，为用户带来...
3. **边框半径（Border Radius）**：为了使背景看起来更像水晶，可以使用border-radius属性来创建圆角或曲面效果，模拟晶体的形状。 4. **盒阴影（Box Shadow）**：通过box-shadow属性，可以模拟水晶的深度和立体感...
1. **自定义标签样式**：`ZYTagView`允许开发者根据需求定制标签的外观，如文字颜色、背景颜色、圆角大小、边框宽度和颜色等。通过调整这些属性，可以创建出与应用整体风格相匹配的标签样式。 2. **动态布局**：...
通过细致地调整图层样式，尤其是“外发光”和“斜面与浮雕”等效果，我们可以打造出一个质感强烈的金属按钮。接下来，我们将按照教程步骤详细解析制作过程。 #### 1. 准备工作 - **打开Photoshop CS5**：首先启动...
边框半径（border-radius）和阴影（box-shadow）可以制造出圆角和立体感；多背景（multiple backgrounds）、渐变（gradients）和径向渐变（radial gradients）则丰富了网页的色彩表现。 HTML5作为最新版本的超文本...
4. **边框与背景**：圆角边框、阴影效果和渐变背景等，让网页元素更加立体和美观。 5. **媒体查询**：media queries实现响应式设计，确保网站在不同设备上都能良好显示。 【前端开发的重要性】 前端开发是构建网站...
在模拟纸质效果时，我们可以利用CSS3的`background-image`属性添加纹理图片，创建出纸张的纹理；使用`box-shadow`和`text-shadow`来模拟纸张的立体感和文字的浮雕效果；通过`border-radius`实现圆角，模仿纸张的自然...
【纯CSS3丝带效果详解】 在Web设计中，丝带常常被用来作为一种视觉提示，以突出特定的信息或功能，比如“新”、“热卖”等...通过不断练习和创新，你将能够设计出更多独特且吸引人的丝带样式，提升你的Web设计技能。
2. 边框与背景：CSS3的边框可以实现圆角、虚线等效果，而背景则可以设置渐变色、图片，甚至可以使用多背景层。在本项目中，这些特性可能被用来创建建筑的立体感和颜色变化。 3. 渐变和阴影：CSS3的线性渐变和径向...
压缩包内的`btn.html`文件可能包含了上述CSS样式的实际应用，而`实体化按钮选中注册按钮.png`和`实体化按钮未选中状态.png`是用于展示按钮不同状态的图片示例，可以帮助理解设计效果。 通过这种方式，我们可以创建...
例如，开发者可能会用CSS3的border-radius属性创建圆角，配合box-shadow来制造立体感，以及运用背景图像或者渐变来模拟磁贴的颜色变化。在JavaScript部分，可能会有专门的函数来处理磁贴的拖放、旋转和动画效果。 ...
在网页设计中，CSS3（层叠样式表第三版）为开发者提供了许多强大的新特性，其中之一就是能够创建出丰富的3D效果。本知识点主要聚焦于使用CSS3来制作具有3D视觉效果的网页按钮，特别是在鼠标点击时呈现出的下凹效果。...
2. **边框和背景**：CSS3允许我们使用圆角边框、渐变背景和阴影效果，这对于构建iPhone 6模型的外形和质感至关重要。例如，可以使用`border-radius`属性创建圆角，`linear-gradient`定义屏幕的渐变背景，以及`box-...
9. **反选删除**：载入“图层2”选区，反选后删除，使按钮边缘呈现出更自然的过渡。 10. **文本编辑**：使用【横排文字工具】添加文字，如“布局服务”，设置字体、字号和消除锯齿方法，使文字清晰易读。 11. **...
例如，我们可以用它来改变背景颜色、边框样式，甚至触发动画效果。 动画效果通常通过CSS3的`transition`和`animation`属性实现。`transition`用于在两个状态间平滑地过渡，而`animation`则允许我们定义更复杂的序列...
4. **颜色和背景**：CSS3支持更多颜色模式（如HSL和RGBA），可以创建丰富多样的渐变背景和半透明效果，使得按钮界面色彩斑斓。 5. **边框和阴影**：`border-radius`可以创建圆角效果，让按钮看起来更柔和；`box-...