圆角属性：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. 【转】Derivation of the Normal Equation for linear regression

    I was going through the Coursera "Machine Learning" course, and in the section on multivar ...

  2. SRM470 - SRM474(1-250pt,500pt)(471-500pt为最短路,474-500pt未做)

    SRM 470 DIV1 250pt 题意:有n个房间排成一排,相邻两个房间之间有一扇关闭着的门(共n-1扇),每个门上都标有‘A’-‘P’的大写字母.给定一个数n,表示第n个房间.有两个人John和 ...

  3. eclipse 错误: 找不到或无法加载主类

    在src文件夹上移除Source Folder,再点右键-Build Path-Use as Source Folder,重新进行编译,一切正常了.

  4. Struts2学习笔记(二):第一个Struts2应用

    一.创建Action类. 创建工程Struts2Demo struts 2中的Action类并不需要继承struts 2中的某个父类,普遍的java类就可以. 在org.sunny.user.acti ...

  5. JS 时间格式CST转GMT

    近几天,在做百度地图时,需要转换时间格式并做显示,但是发现显示的时间格式,出现了错乱,二者的日期和小时都出现了变动.例如: 原始时间格式:Thu Aug 18 20:38:54 CST 2016 转换 ...

  6. Android 基础组件

    基础组件 所有的控件都可以在java代码中创建出来,并且大部分的属性都对应set和get方法,比如 View view = new View(Context context)  context是上下文 ...

  7. MySQL主从复制与lvs+keepalived单点写入读负载均衡高可用实验【转】

    一.环境Master(主机A):192.168.1.1Slave(主机B) :192.168.1.2  W-VIP(写入)  :192.168.1.3 R-VIP(读取)  :192.168.1.4  ...

  8. java环境下的数据库读写分离

    方案很多:阿里的中间件cobar.aop注解方式.com.mysql.jdbc.ReplicationDriver读写分离驱动MySQL数据库的同步. MySQL是开源的关系型数据库系统.主从同步复制 ...

  9. Android-语言设置流程分析

    Android手机语言切换行为,是通过设置-语言和输入法-语言来改变手机的语言,其实这个功能很少被用户使用.     以Android5.1工程源码为基础,从设置app入手来分析和学习语言切换的过程: ...

  10. Java 编程的动态性，第 8 部分: 用代码生成取代反射--转载

    既然您已经看到了如何使用 Javassist 和 BCEL 框架来进行 classworking (请参阅 本系列以前的一组文章), 我将展示一个实际的 classworking 应用程序.这个应用程 ...