圆角属性：border-radius

<style type="text/css">

    .content{

        border: 1px solid green;

        width: 200px;

        height: 150px;

        background-color: grey;

　　　　　　/*为了兼容不同浏览器，通常这么写*/

        border-radius: 10px;

        -webkit-border-radius: 10px;

        -moz-border-radius: 10px;

    }

    </style>

实现圆角按钮：

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title></title>

    <style type="text/css">

    .btn{

        width: 150px;

        height: 50px;

        font-size: 16px;

        background-color: green;

        border: 0px ;

        border-radius: 5px;

    }

    </style>

</head>

<body>

<input type="button" class="btn" value="我是圆角按钮"/>

</body>

</html>

效果：

css3中的圆角属性的更多相关文章

  1. css3中的animation属性

    作用:通过给元素添加animation属性,可以赋予该元素动画效果. <!DOCTYPE html><html>    <head>        <styl ...

  2. CSS3中哪些新属性—阴影、文本省略（1）

    CSS3中的阴影,我知道的就是盒阴影和文字阴影.两者使用大同小异. 1.文字阴影 不知道为啥阴影会被开发出来,觉得这没啥好用啊.用了之后发现好像还行,使页面更有立体感了那么一点点.看起来趣味性强一点. ...

  3. css3中的scroll-behavior属性

    scroll-behavior属性 当用户手动导航或者 CSSOM scrolling API 触发滚动操作时,CSS 属性 scroll-behavior 为一个滚动框指定滚动行为,当用户通过鼠标滑 ...

  4. CSS3中的Transition属性详解

    w3c标准中对CSS3的transition这是样描述的:“CSS的transition允许CSS的属性值在一定的时间区间内平滑地过渡.这种效果可以在鼠标单击.获得焦点.被点击或对元素任何改变中触发, ...

  5. CSS3中的Transition属性详解(贝赛尔曲线)

    transition语法: transition : [<'transition-property'> || <'transition-duration'> || <'t ...

  6. CSS3中的一些属性

    1. 可匹配部分字符串 2. box-sizing属性 3. CSS3多栏布局 1.可匹配部分字符串 /*^运算符,匹配字符串首部*/ a[href^='http://website'] /*$运算符 ...

  7. css3中样式计算属性calc()的使用和总结

    calc的介绍 在css3样式中有一个类似与函数的计算属性calc(),它主要用于指定元素的长度,无论是border.margin.pading.font-size和width等属性都可以使用calc ...

  8. CSS3 中的 box-sizing属性

    语法: box-sizing: content-text | border-box | inherit; content-box(默认): 宽度和高度分别应用元素的内容框:在宽度和高度之外绘制元素的内 ...

  9. css3中的box-sizing属性的使用

    box-sizing属性用来定义元素的width和height所表示的区域,该属性一般有三种值:content-box.border-box.inherit. 其中inherit表示box-sizin ...

随机推荐

  1. 在vim里每行增加//注释

    1.ctrl+v选择区域块 ,可以选到每一行的第一个word 2. shift+i 3. 光标会定位在第一行, 输入一个// 4. 按esc, 被选择的所有行就加上了//

  2. N - Marriage Match II - HDU 3081（最大流）

    题目大意:有一些男孩和女孩玩一个游戏,每个女孩都可以挑一个男孩来进行这个游戏(所有人都要参加),女孩只会挑选她喜欢的男孩,并且她们认为她们朋友喜欢的男孩她们也是喜欢的(朋友的男朋友也是我的男朋友??? ...

  3. I - Caocao's Bridges - hdu 4738（求桥）

    题意:曹操的船之间有一些桥连接,现在周瑜想把这些连接的船分成两部分,不过他只能炸毁一座桥,并且每座桥上有士兵看守,问,他最少需要排多少士兵去炸桥如果不能做到,输出‘-1’ 注意:此题有好几个坑,第一个 ...

  4. hibernate初涉

    好久都不曾写写总结一些东西了,惰性真的是令人难以克制!虽然和许多北漂族一样,艰苦而又迷茫,但是我总能找到一些方向,一点期盼,因为你就我的目标.我会坚持下去,重拾青春的热血,既然人生如戏,那我不当猪脚. ...

  5. [置顶] Ruby，Scala和JavaScript中的函数式编程(一)

    函数式编程(英语:Functional programming)或者函数程序设计,又称泛函编程,是一种编程范型,它将电脑运算视为数学上的函数计算,并且避免使用程序状态以及易变对象.函数编程语言最重要的 ...

  6. 泛泰A870刷4.4专用英文版非触摸CWM Recovery 6.0.4.8(三版通刷)

    首先声明. 发此Recovery的目的是測试能否够三版都能够启动. 而且不会出现像850 860之前出现过的卡第一屏问题! 不希望看到某些人士的过度解读!! 此Recovery能够刷第三方4.4 RO ...

  7. hadoop1.X安装

    1.      配置主机的名称 master,slave1,slave2 2.      安装JDK: 3.      配置IP与主机名称的映射: 192.168.0.100 master 192.1 ...

  8. Cadence 电源完整性仿真实践（一）

    软件版本号:Cadence 16.5 使用工具:Allegro PCB PI Option XL Power Integrity 使用资源:仿真实例下载地址:http://download.csdn. ...

  9. linux下负载均衡（LVS安装与配置）【转】

    一.LVS的三种包转发方式      LVS提供了三种包转发方式:NAT(网络地址映射).IP Tunneling(IP隧道).Direct Routing(直接路由)     不同的转发模式决定了不 ...

  10. android开发4：Android布局管理器1(线性布局，相对布局RelativeLayout-案例)

    控件类概述 View 可视化控件的基类 属性名称 对应方法 描述 android:background setBackgroundResource(int) 设置背景 android:clickabl ...