css圆角进化论 |
您所在的位置：网站首页 › css圆角图片 › css圆角进化论 |
css圆角进化论
|
css圆角进化论
实现关键点，4个块级标签构成 圆角矩形容器(box)—设置固定宽度，同圆角宽度 顶部圆角(radius-top)—使用背景图片实现顶部圆角 内容（ content ）—放置主体内容 底部圆角（ radius-bottom )—使用背景图片实现顶部圆角 2.宽度和高度均自适应实现关键点，5个标签构成 圆角矩形容器(box)—1.上下内边距大小至少设置为圆角高度；2.相对定位；3.放置内容 4个圆角—4个标签，1.分别设置各个圆角背景图片；2.绝对定位于box的4个角优势和劣势 优势：无需过多无意义标签，能够实现个性化圆角 劣势：增加了HTTP请求和页面字节数 三、CSS2.0+标签模拟圆角 border属性实现圆角颜色 标签模拟圆角弧度 圆角像素越大，所需标签越多 *{padding: 0; margin: 0;} .box{ width: 300px; margin: 20px auto; } .radius_border_1{ height: 1px; margin: 0 3px; background: lightblue; border-left: 1px solid #acc3e3; border-right: 1px solid #acc3e3; } .radius_border_2{ height: 1px; margin: 0 2px; background: lightblue; border-left: 1px solid #acc3e3; border-right: 1px solid #acc3e3; } .radius_border_2{ height: 1px; margin: 0 1px; background: lightblue; border-left: 1px solid #acc3e3; border-right: 1px solid #acc3e3; } .loginbox{ background: lightblue; border-left: 1px solid #acc3e3; border-right: 1px solid #acc3e3; height: 200px; }实现的界面是这样的
是不是很神奇呢~ 优势和劣势 优势：纯CSS代码，易于维护，体积小 劣势：圆角像素越大，无意义标签越多数，圆角越发呆板，只能实现纯色圆角，局限性大 四、CSS3.0圆角属性实现圆角border属性设置边框样式（颜色、粗细、样式） border-radius属性实现圆角 优势和劣势 优势：专用CSS代码，易于维护，体积小，圆角自然圆滑，适合扁平化圆角实现 劣势：IE8及以下版本不支持CSS3.0，存在兼容性问题，对于个性化圆角实现上存在局限性以上内容总结自慕课网，视频可见： CSS圆角进化论 |
【本文地址】
今日新闻 |
推荐新闻 |