利用border-radius属性可以给元素div,input元素等添加圆角效果

后跟 值为这个圆角的半径,即数值越大效果越明显

-webkit-border-top/bottom-left/right-radius可以给某个角添加弧度,上下-左右的顺序不能反

左上:-webkit-border-top-left-radius:10px;

右上:-webkit-border-top-right-radius:10px;

左下:-webkit-border-bottom-left-radius:10px;

右下:-webkit-border-bottom-right-radius:10px;

CSS3实现圆角效果的更多相关文章

  1. 实现IE下兼容CSS3的圆角效果

    有些CSS3的牛逼的效果在IE下展示不出来是最烦人的啦,在项目中做的圆角效果到了IE下一堆方块....忒尴尬了...,找了个替代解决方案 1.首先下载一个js插件PIE.js百度一搜都是的,我也就不写 ...

  2. css3之圆角效果 border-radius

    圆角效果 border-radius  border-radius是向元素添加圆角边框. 使用方法: border-radius:10px; /* 所有角都使用半径为10px的圆角 */ border ...

  3. CSS3边框 圆角效果 border-radius

    border-radius是向元素添加圆角边框 使用方法: border-radius:10px; /* 所有角都使用半径为10px的圆角 */ border-radius: 5px 5px 5px ...

  4. 利用CSS3实现圆角的outline效果的教程

    一.首先,outline是个很牛的东西1. border近亲outline和border是近亲,为什么这么讲呢?首先,都是给元素外面套框框的:其次,支持的属性值几乎都是一样的,例如,outline-s ...

  5. 使用css3来实现边框圆角效果

    经常看到别人的网站有个边框来修饰文字区域,类似圆角矩形把文字环绕起来,特别有感觉,于是就试着用图片边框来修饰,但是用图片过多会拉慢网页的加载速度,能不能使用css3来实现边框圆角效果呢?当然borde ...

  6. CSS3属性之圆角效果——border-radius属性

    在css3之前,要实现圆角的效果可以通过图片或者用margin属性实现(可以参考这里:http://www.hicss.net/css-practise-of-image-round-box/).实现 ...

  7. 超简单CSS3实现圆角、阴影、透明效果

    CSS实现圆角,阴影,透明的方法很多,传统的方法都比较复杂,用CSS3就方便很多了,虽然现在各浏览器对CSS3的支持还不是很好,但不久的将来CSS3就会普及. 1.圆角 CSS3实现圆角有两种方法. ...

  8. css3帮你轻松实现圆角效果，不一样的前端页面。

    在Web前端页面实现圆角效果,CSS3帮你轻松实现,一个人人皆知的属性 圆角边框的绘制是Web页面和Web应用程序中经常用来美化页面效果的手法之一.今天,小编为大家介绍CSS3提供的可以将矩形变为圆角 ...

  9. CSS3之圆角

    CSS3圆角border-radius也是比较常用的,有了圆角,可以少很多图片了:) 语法: border-radius : none | <length>{1,4} [/ <len ...

随机推荐

  1. readline

    注意,向后表示向左,向前表示向右. "\C-f": forward-char 光标向右一个字符 "\C-b": backward-char  光标向左一个字符 ...

  2. Todd's Matlab讲义第3讲：牛顿法和for循环

    方程数值求解 下面几讲,我们将聚集如下方程的解法: \begin{equation} f(x)=0 \tag{3.1}\label{3.1} \end{equation} 在微积分课程中,我们知道,许 ...

  3. Entity Framework浅析

    1.Entity Framework简介 http://www.cnblogs.com/aehyok/p/3315991.html 2.Entity Framework DBFirst尝试http:/ ...

  4. CentOS6.3编译安装Memcached集群分布式缓存代理Magent-0.6出错汇总

    参考文章:Memcached集群/分布式/高可用 及 Magent缓存代理搭建过程 详解,搭建Magent,在编译的过程中会出现很多错误: #编译安装安装magent到 /usr/local/mage ...

  5. C#GDI+编程基础（一：Graphics画布类）

    GDI+存在的意义:将变成与具体硬件实现细节分开. GDI+步骤:获取画布,绘制图像.处理图像 命名空间: using System.Drawing;//提供对GDI+基本图形功能的访问 using ...

  6. CSS3实现背景颜色渐变 摘抄

    一. Webkit浏览器 (1) 第一种写法: background:-webkit-gradient(linear ,10% 10%,100% 100%, color-stop(0.14,rgb(2 ...

  7. ios7 ios8导航栏透明

    自动调整scrollview的insets为0, 然后scrollview就不会向下偏移64px self.automaticallyAdjustsScrollViewInsets = NO; 导航栏 ...

  8. Android学习笔记（二）——探究一个活动

    //此系列博文是<第一行Android代码>的学习笔记,如有错漏,欢迎指正! 活动(Activity)是最容易吸引到用户的地方了,它是一种可以包含用户界面的组件,主要用于和用户进行交互.一 ...

  9. r-cnn学习(一)

    http://closure11.com/rcnn-fast-rcnn-faster-rcnn%E7%9A%84%E4%B8%80%E4%BA%9B%E4%BA%8B/ 首先看fast r-cnn这篇 ...

  10. eclipse中整合springMvc和velocity

    1.项目所需要的jar包(有些可能多余) 2.在src目录下创建一个bean  一个一个controller ,路径如下 person代码: package com.test.bean; import ...