<html>
<head>
<title>DIV+CSS圆角框组件</title>
<style type="text/css">
/*原理：由左右边框长度、左右缩进以及溢出隐藏实现。*/
/*高度由div的width决定*/
div#sidebar_f {
margin: 0;
padding: 0;
float: left;
width: 800px;
text-align: center;
}
div#sidebar {
}
div.linetop,div.linebottom,div.line1,div.line2,div.line3 {
overflow: hidden;
display: block;
}
div.linetop {
margin: 0 5px;
height: 1px;
border-bottom: 1px solid;
}
div.linebottom {
margin: 0 5px;
height: 1px;
border-top: 1px solid;
}
div.line1 {
margin: 0 3px;
height: 1px;
border-left: 2px solid;
border-right: 2px solid;
}
div.line2 {
margin: 0 2px;
height: 1px;
border-left: 1px solid;
border-right: 1px solid;
}
div.line3 {
margin: 0 1px;
height: 2px;
border-left: 1px solid;
border-right: 1px solid;
}
/*高度由middle的height决定*/
div.middle {
margin: 0 0;
height: auto;
border-left: 1px solid;
border-right: 1px solid;
}
/*设置背景颜色*/
div.middle,div.line1,div.line2,div.line3 {
background-color: #F8F8F8;
}
/*设置边框颜色*/
div.linetop,div.linebottom,div.middle,div.line1,div.line2,div.line3 {
border-color: #7F9DB9;
}
</style>
</head>
<body>
<div id="sidebar_f">
<div class="linetop"></div>
<div class="line1"></div>
<div class="line2"></div>
<div class="line3"></div>
<div class="middle" id="sidebar">
这是内容。
</div>
<div class="line3"></div>
<div class="line2"></div>
<div class="line1"></div>
<div class="linebottom"></div>
</div>
</body>
</html>
分享到：
相关推荐
CSS3是CSS的最新版本，增加了许多新的功能，如阴影、圆角、过渡、动画以及Flexbox和Grid布局系统，极大地丰富了网页设计的可能性。 2. **后台模板的重要性**：后台模板通常用于网站的管理界面，它们具有清晰的结构...
本篇内容将详细探讨如何利用div+css制作实用且美观的分页页码。 首先，我们需要理解分页的基本结构。通常，一个分页组件包括上一页、下一页按钮以及一系列数字链接，表示当前所在的页码和可以跳转的其他页码。这些...
在网页设计中，`div` 和 `css` 是两种核心的技术，用于构建和美化页面布局。`div` 是一个HTML（超文本标记语言）元素，它通常被用作页面上的内容容器，而`css`（层叠样式表）则负责控制页面的样式、布局和表现。在...
通过CSS3，还可以添加过渡效果、阴影、圆角等增强用户体验的特性。 JavaScript是实现树形菜单交互功能的关键。通过js，我们可以实现点击菜单项时子菜单的动态展开和关闭，以及焦点的切换等交互行为。通常，会使用...
《别具光芒Div+Css网页布局与美化实例》是一本专为初学者设计的经典教程，旨在帮助读者掌握使用Div+CSS进行网页布局和美化的核心技巧。Div+CSS是现代网页设计的基础，它使得网页结构清晰，样式独立，提高了网页的可...
在网页设计领域，"模仿windows窗口DIV+CSS"是一个常见的技术实践，旨在通过纯前端技术重现Windows操作系统中窗口的外观和交互效果。Windows Vista引入了一系列视觉改进，包括玻璃透明效果、动态边框以及平滑动画，...
【JS+CSS+div内容图片轮播特效】是一种常见的网页动态效果，用于展示一组图片或内容，通过平滑过渡在不同图片之间切换，为用户提供视觉上的吸引力和交互性。在这个项目中，`div`作为主要的容器元素，`CSS`用于布局和...
- 图片轮播：利用JavaScript和CSS，可以创建一个自动切换的图片展示组件，用户可以通过点击按钮或滑动来浏览多张图片。 - 图片预加载：使用JavaScript可以预加载图片，提高用户体验，避免用户在浏览时等待图片加载...
div+css实现自适应宽度按钮 在本节中，我们将学习如何使用div+css实现自适应宽度按钮。自适应宽度按钮是一种常见的UI组件，能够根据按钮的内容自动调整宽度，而不需要手动设置宽度。 标题解释 标题“div+css实现...
5. **输入框样式**：包括边框样式、内阴影、圆角等，可以使用CSS来定制输入框的外观，使其更符合品牌形象。 6. **按钮样式**：按钮的背景色、文字颜色、悬停效果、点击反馈等都可以通过CSS来定制。 7. **交互效果*...
本知识点将详细探讨如何使用纯JavaScript或者借助CSS3来创建圆角框组件，并结合提供的"demo"文件进行实例解析。 首先，我们从最基础的CSS3方法开始。CSS3引入了`border-radius`属性，允许开发者为元素的每个角落...
站长推荐全新兼容DIV+CSS版中国地图 JS+DIV+CSS支持热点效果的中国地图 16.支持4级树形 展开菜单插件dTree原版下载 2)JQuery Tab 1.jQuery.Switchable常见网页UI组件(整合Tabs、Slide、Scrollable等插件) 2....
总的来说，通过JS和CSS的结合，我们可以将原本朴素的Select选项框转变为符合现代审美和交互需求的组件。这个过程涉及HTML结构的调整、CSS样式的定义以及JavaScript的交互实现，最终目的是提供一个既美观又易用的下拉...
例如，在React中，我们可以创建一个自定义组件，利用CSS-in-JS库如styled-components或emotion来定义圆角框样式。 总结起来，圆角框栏目制作是前端开发中的基本技能，它结合了CSS的`border-radius`属性和良好的设计...
在标题"css3 支持ie8以下圆角"和描述"DIVCSS5圆角实例，CSS3版本圆角实例，支持低版本IE6-IE9浏览器"中，我们关注的关键知识点是CSS3的圆角边框以及如何在早期的Internet Explorer浏览器（IE6到IE9）中实现兼容性。...
CSS还可以用来实现卡片的阴影效果、圆角、过渡动画等，增强视觉吸引力。 接着，我们讨论“小米登录框”。登录框是网站或应用中必不可少的部分，它需要简洁、易用且安全。在HTML中，可以使用`<form>`标签来创建表单...
在网页设计中，下拉列表框（Dropdown List）是常见的用户输入组件，但其默认样式通常较为简单，可能无法满足现代网页美观的需求。本文通过结合JavaScript（JS）和层叠样式表（CSS）技术，提供了三款不同风格的下拉...
标题中的“jQuery+CSS3实现选项卡插件下载”指的是一个使用JavaScript库jQuery和现代CSS技术CSS3构建的选项卡组件。这个插件允许用户在不同的内容区域之间切换，通常用于展示网页上有限空间内的多组信息。选项卡设计...
在选项卡设计中，CSS3 可用于定义选项卡的样式，比如背景色、字体、边框、圆角，以及在切换选项卡时平滑过渡的效果。 3. **HTML5**: HTML5 提供了新的标签和属性，使开发者能够更清晰地结构化网页内容。在选项卡...
本主题“CSS+div选项卡”主要关注如何利用这两者来创建功能性和美观的选项卡组件。选项卡是一种常见的网页布局模式，它允许在有限的空间内展示多个相关但独立的内容区域，通过点击不同的标签来切换显示的内容。 ...