adius,就是半径的意思。用这个属性可以很容易做出圆角效果,当然,也可以做出圆形效果。原理很简单,“正方形的内切圆的半径等于正方形边长的一半”。下面就做一个红色的圆。

工具/原料

  • Adobe Dreamweave 软件

方法/步骤

  • 语法:

    border-radius : none | <length>{1,4} [ / <length>{1,4} ]?

    相关属性: border-top-right-radius , border-bottom-right-radius , border-bottom-left-radius , border-top-left-radius

  • 取值:

    <length>:

    由浮点数字和单位标识符组成的长度值。不可为负值。

    border-top-left-radius:

    由浮点数字和单位标识符组成的长度值。不可为负值。

  • 说明:

    第一个值是水平半径。

    如果第二个值省略,则它等于第一个值,这时这个角就是一个四分之一圆角。

    如果任意一个值为0,则这个角是矩形,不会是圆的。

    值不允许是负值。

  • 在Adobe Dreamweave 软件里写如以下代码:

    <!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>在HTML中如何把块的边框做成圆角</title>

    <style type="text/css">

    .a {

    border: 1px solid #000;

    border-top-left-radius: 10px;

    border-top-right-radius: 10px;

    border-bottom-left-radius: 10px;

    border-bottom-right-radius: 10px;

    height:200px;

    width:500px;

    padding:20px;

    }

    </style>

    </head>

    <body>

    <p class="a">

    在HTML中如何把块的边框做成圆角

    </p>

    </body>

    </html>

  • 样式注释

    各个边角的样式分开显示:

    border-top-left-radius: 10px;左上部边框圆角10个像素

    border-top-right-radius: 10px;右上部边框圆角10个像素

    border-bottom-left-radius: 10px;左下部边框圆角10个像素

    border-bottom-right-radius: 10px;右下部边框圆角10个像素

    全部边角一个样式:border-radius: 10px;所有边框圆角10个像素

     

在HTML中如何把块的边框做成圆角的更多相关文章

  1. java 子类、父类中静态代码块、字段,非静态代码块、字段以及构造函数的初始化顺序和次数

    一个类中的数据初始化顺序是面试官非常喜欢出的面试题之一,本文用一个实例来介绍java中子类.父类中静态代码块.字段,非静态代码块.字段以及构造函数的执行顺序和次数. 一.包结构

  2. Service 中添加同步块防止并发 重复

    Service 中添加同步块防止并发 重复. synchronized(this){}

  3. ORA-00379 缓冲池 DEFAULT 中无法提供 32K 块大小的空闲缓冲区

    (一)问题 今天在使用Pl/sql developer查看表空间大小的时候,报错误:ORA-00379 缓冲池 DEFAULT 中无法提供 32K 块大小的空闲缓冲区,具体如下图: SQL> s ...

  4. 删除外部dwg中指定的块定义

    本例实现删除外部图纸中指定的块定义,在外部图纸当前模型空间中是没有该块定义的块参照存在. 代码如下: void CBlockUtil::DeleteBlockDefFormOtherDwg(const ...

  5. ios真机中Text组件出现多余边框

    问题 ios真机中Text组件出现多余边框(模拟器不会出现,真机会出现该问题). 原因 在ios启动页设置中,预设的尺寸要求与设置中图片尺寸不符合导致屏幕精度计算出现问题(启动屏分辨率错误设置会导致手 ...

  6. 【Java基础】2、Java中普通代码块,构造代码块,静态代码块区别及代码示例

    Java中普通代码块,构造代码块,静态代码块区别及代码示例.Java中普通代码块,构造代码块,静态代码块区别及代码示例 执行顺序:静态代码块>静态方法(main方法)>构造代码块>构 ...

  7. javascript中不存在块级作用域,所以要小心使用在块级作用域中的函数声明所带来的作用域混乱.

    在javascript中函数的作用域是一个非常重要的概念. javascript中是没有块级作用域,但是有函数作用域的概念. 我们在开发的过程中,经常会遇到这样的问题, 某个函数我暂时不需要,不想声明 ...

  8. Java 中静态代码块初始化问题测试

    Java 中静态代码块初始化问题测试 原创 情况一:变量是 static final 修饰的"编译期常量",如 public static final String a = &qu ...

  9. 浅谈Java中静态初始化块跟非初始化块

    众所周知在JAVA编程语言中有两种初始化块:   静态初始化块 非静态初始化块 他们到底有什么区别呢?今天就浅谈一下JAVA中静态初始化块和非静态初始化块的区别   静态初始化块 定义:       ...

随机推荐

  1. Android之XML序列化和解析

    XML文件是一种常用的文件格式,可以用来存储与传递数据 ,本文是XML文件序列化与解析的一个简单示例 写文件到本地,并用XML格式存储 /** * 写xml文件到本地 */ private void ...

  2. .net学习之类与对象、new关键字、构造函数、常量和只读变量、枚举、结构、垃圾回收、静态成员、静态类等

    1.类与对象的关系类是对一类事务的统称,是抽象的,不能拿来直接使用,比如汽车,没有具体指哪一辆汽车对象是一个具体存在的,看的见,摸得着的,可以拿来直接使用,比如我家的那辆刚刚买的新汽车,就是具体的对象 ...

  3. asp.net获取客户端IP方法(转载)

    最近web获取客户端ip,看到下面这篇文章,转载过来,一起分享(转载地址:http://www.cnblogs.com/yejun/archive/2008/02/26/1082485.html) 通 ...

  4. 电脑上安装的android虚拟机,能进行基站定位和GPS定位吗?要怎么做才能定位?(转)

    基站定位是通过电信运营商的服务来实现的,至少你得有SIM卡吧,一般电脑是不会有电话功能的吧,所以,通过基站定位不可能. GPS是需要有相应的硬件来支持的,类似于手机需要有GPS模块才可以,电脑一般没有 ...

  5. sql server系统表详细说明

    sysaltfiles  主数据库 保存数据库的文件 syscharsets  主数据库字符集与排序顺序 sysconfigures 主数据库 配置选项 syscurconfigs 主数据库当前配置选 ...

  6. Spark metrics on wordcount example

    I read the section Metrics on spark website. I wish to try it on the wordcount example, I can't make ...

  7. 手机响应式wap网页最佳方案

    wap页面怎么做? 这个问题困扰了我好久,在PC上我们惯用的px单位在手机上根本不适用,即使我们写了<meta name="viewport" content="w ...

  8. Kali Linux 2016.2发布提供虚拟机以及系统镜像下载

    Kali Linux 2016.2发布提供虚拟机以及系统镜像下载   Kali Linux 2016.2发布提供虚拟机以及系统镜像下载,本次Kali Linux 2016.2提供了五种桌面模式,分别为 ...

  9. Python核心模块——urllib模块

    现在Python基本入门了,现在开始要进军如何写爬虫了! 先把最基本的urllib模块弄懂吧. urllib模块中的方法 1.urllib.urlopen(url[,data[,proxies]]) ...

  10. java多次替换(replace不行)

    import java.util.regex.Matcher; import java.util.regex.Pattern; public class test { public static vo ...