首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

CSS3圆角详解

CSS3是样式表(style sheet)语言的最新版本,它的一大优点就是支持圆角。 网页设计大师Nicholas Zakas的最新文章,清晰易懂地解释了CSS3圆角的各个方面,非常值得学习。...========================================= CSS3圆角详解 作者:Nicholas Zakas 译者:阮一峰 原文:http://msdn.microsoft.com.../en-us/scriptjunkie/gg508841.aspx 发表日期:2010年12月8日 一、CSS3圆角的优点 传统的圆角生成方案,必须使用多张图片作为背景图案。...CSS3就不会发生这种情况。 二、border-radius属性 CSS3圆角只需设置一个属性:border-radius(含义是"边框半径")。你为这个属性提供一个值,就能同时设置四个圆角的半径。...四、浏览器支持 IE 9、Opera 10.5、Safari 5、Chrome 4和Firefox 4,都支持上述的border-radius属性。

95920

CSS3圆角 border-radius

HTML5学堂:圆角是用一段与角的两相切的圆弧替换原来的直角。...CSS3圆角的优势: CSS3提供了更简便快捷的属性border-radius之后,实现边框圆角就非常的简单了,而且多了很多个优点,一方面减少了图片的HTTP的请求,一方面提高了网站的性能。...既然CSS3圆角提供了那么多的好处,我们看看CSS3的border-radius是如何实现圆角的。我们先来看看基本语法。...代表“一次” “*”表示可出现多次 圆角书写方式: 在实现圆角之前,我们先来看几个效果,接着看CSS3圆角是如何实现的? 效果一: 扇形 结构代码: <!...“/”前是指圆角的水平半径,而“/”后是指圆角的垂直半径,他们两都遵循(margin四个值)的顺序原则。 1.只有一个值,那么左上角、右上角、右下角、左下角四个值相等。

1.9K70
  • 您找到你想要的搜索结果了吗?
    是的
    没有找到

    CSS3圆角边框“完全解读”

    圆角的制作曾经困扰了开发者很久,以至于以前开发者只能使用图片来替代。但是当CSS3的这个border-radius出现之后,对于开发者而言简直就是福利,只需要在需要的地方给上一句代码就可以了。...一起来学习学习吧~~~ 如何理解border-radius border-radius——CSS3的圆角属性。但是除了圆角的定义外,它还可以做点别的事情。...radius其实指的是边框所在的半径,这个CSS3属性不仅能够创建圆角,还可以创建椭圆角(如图下图第2),而把这些角按照不同的顺序和大小来展现,也能够绘制成多种多样的图形。...本例中,就使用圆角,借助伪元素:before和:after以及CSS3中的旋转为大家制作了一个"爱心"。...代码解析:上述案例中,借助伪元素来实现两个左上角和右上角都出现圆角的块状,减少了div的使用。然后借助CSS3的另外一个特性-旋转,分别正向和逆向完成一个爱心的拼接,最后展现出来。

    2.1K50

    快速添加圆角和描

    前言 对于习惯使用Storyboard的人来说,设置圆角、描是一件比较蛋疼的事,因为苹果没有在xcode的Interface Builder上直接提供修改控件的圆角,边框设置。...我们来说说如何对某个控件进行圆角、描处理 初级 对于一个初学者来说,如果要进行某个控件的圆角、描设置,就要从Storyboard关联出属性,然后再对属性进行代码处理。...CGColor; 这样不仅需要Storyboard关联出属性,还要写一堆代码对属性进行设置,不得不说实在麻烦~ 中级 更聪明的做法是使用Storyboard提供的Runtime Attributes为控件添加圆角...(不仅仅是圆角、描~) 设置圆角、描的Key为: layer.borderWidth layer.borderColorFromUIColor layer.cornerRadius clipsToBounds...动态显示设置效果 直接使用的话只有在运行时才能看到效果, 例如要实时显示一个UIBUtton圆角、描效果,需要创建一个类继承UIButton #import #import

    64730

    Android自定义View实现带4圆角或者2圆角的效果

    1 问题 实现任意view经过自定义带4圆角或者2圆角的效果 2 原理 1) 实现view 4圆角 ? 我们只需要把左边的图嵌入到右边里面去,最终显示左边的图就行。...2) 实现view上2圆角 ? 我们只需要把左边的图嵌入到右边里面去,最终显示左边的图就行。..., roundRect.bottom, srcPaint); //保存去掉底部2圆角的roundRect(实际就是保留顶部的2个圆角) // canvas.drawRect(roundRect.left...然后我们点击图片切换效果如下,上2圆角效果 ?...总结 到此这篇关于Android自定义View实现带4圆角或者2圆角的效果的文章就介绍到这了,更多相关android 自定义view 圆角内容请搜索ZaLou.Cn以前的文章或继续浏览下面的相关文章希望大家以后多多支持

    4.5K20

    CSS3圆角、opacity 透明度、rgba 背景色设置

    CSS3圆角 设置某一个角的圆角,比如设置左上角的圆角: border-top-left-radius:30px 60px; 二话不说,先写个这个左上角的圆角示例来看看先,代码如下: <!...先写出一个正方形的div,现在可以准备设置左上角为圆角了。 ? 如果只写一个30px,说明上方和左方都是以30px的半径。如果按照示例再写一个60px呢? ?...可以看出,左边的竖线的弧度更加大,所以第二个参数就是left的半径60px。 那么现在写好了左上角,那么上下左右又该怎么写呢? ? 嗯,已经写出来效果了。...---- 上面分别写了四个圆角单独写的方式,我们来简化一下。 再来一个同时分别设置四个角: border-radius:30px 60px 120px 150px; ?...rgba(新的颜色值表示法) 1、盒子透明度表示法: .box { opacity:0.1; /* 兼容IE */ filter:alpha(opacity

    1.5K30

    iOS开发技巧:快速实现 圆角+描

    http://nshipster.cn/ibinspectable-ibdesignable/ 我们来说说如何对某个控件进行圆角、描处理: 初级 对于一个初学者来说,如果要进行某个控件的圆角、描设置...CGColor; 这样不仅需要Storyboard关联出属性,还要写一堆代码对属性进行设置,不得不说实在麻烦~ 中级 比较机智的做法是使用Storyboard提供的Runtime Attributes为控件添加圆角...(不仅仅是圆角、描~) 如下图 ?...设置圆角、描的Key为: layer.borderWidth layer.borderColorFromUIColor layer.cornerRadius clipsToBounds 这样做不用关联出属性...动态显示设置效果 直接使用的话只有在运行时才能看到效果, 例如要实时显示一个UIBUtton圆角、描效果,需要创建一个类继承UIButton #import #import

    1.7K30

    Android实现带描圆角图片

    利用学过的BitmapShader渲染类,我们来实现一个带描圆角图片。 具体实现: 用来显示自定义的绘图类的布局文件 res/layout/main.xml: <?...,并将画布在X轴上平移40像素,在Y轴上平移20像素,再绘制一个黑色的2像素的圆角矩形,作为图片的,最后绘制一个使用BitmapShader渲染的圆角矩形图片,具体代码如下: MainActivity...RectF rect=new RectF(0,0,280,180); canvas.translate(40, 20);//将画布在X轴上平移40像素,在Y轴上平移20像素 //为图片添加描...paint.setStyle(Style.STROKE);//设置填充样式为描 paint.setColor(Color.BLACK);//设置颜色为黑色 paint.setStrokeWidth...(2);//设置笔触宽度为2像素 canvas.drawRoundRect(rect, 10, 10, paint);//绘制一个描圆角矩形 paint.setStyle(Style.FILL

    2.3K10

    Android 正 N 圆角头像的实现

    默认值是 0 ) miv_border_color 表示边界 Path 的 Color miv_border_overlay 表示边界 Path 是否要覆盖在图片上面 miv_fill_color 表示填充的颜色...要实现正 N 变形主要有几个难点 怎样让我们的头像变成正 N 形 怎样绘制正 N 形 怎样绘制带圆角的正 N 形 ---- 怎样让我们的头像变成正 N 形?...核心代码只有这几句,就可以让我们绘制出的正 N 形具有圆角 CornerPathEffect cornerPathEffect = new CornerPathEffect(mCornerRadius...这种正 N 圆角头像的效果,说难也不难,说容易也不容易。因为里面综合了很多知识点,需要一步步去处理。(比如怎样绘制正 N 形,怎样支持圆角,怎样处理 Padding 等等)。...六角形等) ---- 参考博客:如何用Canvas画一个正多边形 Android 圆形头像的两种实现方式 Android 正 N 圆角头像的实现 如果,你觉得效果还不错,请到我的 github

    1.3K10
    领券