文档章节

CSS圆角进化论

上古遗露
 上古遗露
发布于 2015/10/31 16:54
字数 457
阅读 9
收藏 0

CSS圆角进化三个阶段

  1. 背景图片实现圆角

  2. CSS2.0+HTML标签模拟圆角

  3. CSS3.0圆角属性(border-radius属性实现圆角)

一、背景图片实现圆角

实现方式:

  • 宽度固定,高度自适应

    设置两个div,分别设置其背景图为宽度固定的圆角图,且div宽度与图片宽度一致。

//假设上圆角(top_800.gif)与下圆角背景图片(bottom_800.gif)为800px
<style type="text/css">
    .top {
        background:url("top_gif") 0 0 no-repeat;
        width:800px;
    }
    .bottom {
        background:url("bottom_gif") 0 0 no-repeat;
        width:800px;
    }
</style>
<body>
    <div id="container">
        <div id="top"></div>
        <div id="bottom"></div>
        <div id="bottom"></div>
    </div>  
</body>
  • 宽度和高度均自适应


二、CSS2.0和HTML标签实现圆角

利用div元素,一层一层叠加,每一层比上一层多一像素。

<style type="text/css">
    #radius_1 {
        margin:0 2px;
        height:1px;
    }
    #radius_2 {
        margin:0 1px;
        height:1px;
    }
</style>
<div id="container">
    <div id="radius_1"></div>    //制作圆角
    <div id="radius_2"></div>
    <div id="contetn">内容</div>
    <div id="radius_2"></div>    //制作圆角
    <div id="radius_1"></div>
</div>

三、CSS3.0圆角属性实现圆角

3.1 圆角属性(border-radius)属性简介

  • 属性值:表示圆角半径,可使用长度单位px或百分比

  • 简写属性:border-radius

  • 分量属性:border-top-left-radius(上左)、border-top-right-radius(上右)、border-bottom-left-radius(下左)、border-bottom-right-radius(下右)(注意top和bottom在前,left和right在后)

3.2 简写属性的值设置

  • 1个属性值:4个角半径相同

  • 2个属性值:分别为上左和下右、上右和下左

  • 3个属性值:分别代表上左、上右和下左、下右

  • 4个属性值:分别代表上左、上右、下右、下左

3.3 浏览器私有前缀

解决各浏览器显示差异,针对浏览器写私有前缀:

  • IE内核:-ms-

  • FireFox内核:-moz-

  • 谷歌浏览器、Safari内核:-webkit-


© 著作权归作者所有

上古遗露
粉丝 8
博文 56
码字总数 42929
作品 0
苏州
私信 提问
CSS3 边框(Borders)

CSS3 Borders 用CSS3,你可以创建圆角边框,添加阴影框,并作为边界的形象而不使用设计程序,如Photoshop。 在本章中,您将了解以下的边框属性: border-radius box-shadow border-image 浏览...

wybo521
2016/01/23
47
0
CSS3绘制圆角矩形的简单示例

随着网络的发展,CSS 也在不断的完善,充分吸取多年来 Web 发展的需求,提出了很多新颖的 CSS 特性,例如很受欢迎的圆角矩形 border-radius 属性,但很可惜,此属性目前没有得到任何浏览器的...

sirui
2015/11/04
67
0
让CSS3圆角兼容所有的浏览器(转)

CSS3出现以后,WEB前端的美化变得更加容易,一些原本要用图片才能实现的外观,现在用样式表就可以搞定,也因而使得页面变得更小。但令人头疼的是CSS3的很多属性并不被所有的浏览器支持。本人...

未来十年
2012/08/25
0
0
CSS偶有所得 - table 边框加圆角踩坑

1.发现问题 看到代码里,关于表格,大家不是很喜欢用原生的table,基本都是div来做。究其原因,大概是table的样式有时候难把控,不像直接操作div那么方便。比如:我们想做一个表格,然后希望...

翊尘Jocelyn
10/04
0
0
CSS纯图片圆角Box的实现技巧

CSS实例教程——纯图片圆角Box的实现技巧 BY:htttp://www.iiwnet.com 终于要开始写实战系列了,本站的口号可是理论为辅,实战为主哦。对,你没有看错,就是“纯图片”,不是纯代码实现而是利...

西西爱OS
2012/09/29
190
0

没有更多内容

加载失败,请刷新页面

加载更多

500行代码,教你用python写个微信飞机大战

这几天在重温微信小游戏的飞机大战,玩着玩着就在思考人生了,这飞机大战怎么就可以做的那么好,操作简单,简单上手。 帮助蹲厕族、YP族、饭圈女孩在无聊之余可以有一样东西让他们振作起来!...

上海小胖
今天
8
0
关于AsyncTask的onPostExcute方法是否会在Activity重建过程中调用的问题

版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。 本文链接:https://blog.csdn.net/XG1057415595/article/details/86774575 假设下面一种情况...

shzwork
今天
7
0
object 类中有哪些方法?

getClass(): 获取运行时类的对象 equals():判断其他对象是否与此对象相等 hashcode():返回该对象的哈希码值 toString():返回该对象的字符串表示 clone(): 创建并返此对象的一个副本 wait...

happywe
今天
6
0
Docker容器实战(七) - 容器中进程视野下的文件系统

前两文中,讲了Linux容器最基础的两种技术 Namespace 作用是“隔离”,它让应用进程只能看到该Namespace内的“世界” Cgroups 作用是“限制”,它给这个“世界”围上了一圈看不见的墙 这么一...

JavaEdge
今天
8
0
文件访问和共享的方法介绍

在上一篇文章中,你了解到文件有三个不同的权限集。拥有该文件的用户有一个集合,拥有该文件的组的成员有一个集合,然后最终一个集合适用于其他所有人。在长列表(ls -l)中这些权限使用符号...

老孟的Linux私房菜
今天
7
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部