CSS3系列教程:边框半径和圆角

CSS3系列教程:边框半径和圆角的相关文章

• 
  div+css实现圆角边框

  标签：Web开发

  div+css实现圆角边框，在网络上查看了一下，很多都是实现圆角的矩形的方法，我在这里介绍的是实现圆角矩形边框的方法。 用代码说明问题： html head style #a{ border-left:1px #333 solid; border-right:1px #333 solid; width:300px; height:500px; } .b{ height:1px; overflow:hidden; border-left:1px #333 solid; border-right:1px #333 solid; } /style /head body div div class="b" style="margin-...[ 查看全文 ]

  心凉lxy

  161
• 
  CSS教程：详解CSS3 Media Queries

  标签：平面设计 海报设计 广告设计 画报设计 签名设计 服装设计 名片设计 画册设计 版式设计 商标设计

  说起CSS3的新特性，就不得不提到 Media Queries 。本文比较详细，所以很多实际中用不到。所以如果只是想简单了解Media Queries，推荐参考 CSS3 Media Queries 。 CSS2.1定义了 Media 的部分，包括类型、组别和规则等。CSS并非为了显示器而创造，而是应用于各种各样的媒体，比如常见的显示器，越来愈多的手持设备，可能略显过时的电视机等等。 而 Media Queries 的引入，其作用就是允许添加表达式用以确定媒...[ 查看全文 ]

  运城学院好男人

  21
• 
  兼容所有浏览器的CSS3圆角

  标签：平面设计 海报设计 广告设计 画报设计 签名设计 服装设计 名片设计 画册设计 版式设计 商标设计

  前一段时间，我经常收到一个关于如何在IE浏览器中使用CSS3的 border-radius 属性实现圆角HTML元素的问题。你或许知道CSS3的border-radius 属性被Safari、Firefox和Chrome等浏览器原生支持，但是由于某些原因IE并不支持它。 那么要想在IE中实现圆角，你不得不使用一些技巧，比如使用带有背景图片的CSS类(看一下这篇文章)。 而我知道的在各个浏览器中实现圆角的较简单快速的方案是结合CSS3和JavaScript。Curv...[ 查看全文 ]

  单色器windy

  01
• 
  初步了解CSS3

  标签：Html CSS布局 Div+CSS XHTML

    最近闲来无事，上W3C转了一圈，粗略地浏览了一下尚未发布的CSS3，虽然还未被W3C正式发布出来，但还是能从已有的资料中窥出一些端倪，一个很明显的特征，CSS3制订得越来越细致了，某些细节之处完全超乎你所能想象的到的范围。 在这里不提及CSS3的语法，因为对于目前尚未有软件支持的CSS3，任何语法的探讨都像是空中楼阁，毫无意义可言。以下我就列举一下CSS3中部分新内容。 1、...[ 查看全文 ]

  3鈨o笍濮

  41
• 
  HTML5/CSS3的开发框架：实用HTML5和CSS3框架

  标签：平面设计 海报设计 广告设计 画报设计 签名设计 服装设计 名片设计 画册设计 版式设计 商标设计

  所有的开发人员都应该注意了，你们绝对应该看看这篇文章，帮助你快速创建HTML5/CSS3的开发框架。可能你也看到过其它的框架，但是你应该看看这些框架，因为你以前可能没用过他们中的大部分。看看最新的实用HTML5和CSS3框架吧！希望你们喜欢！ 1.HTML5boilerplate H5BP带给你非常漂亮的文档，一个网站优化的编译脚本，还有一个自定义的boilerplate编译器。除此之外，我们还支持lighttd，Google App Engine和No...[ 查看全文 ]

  阿尔bi丝丶

  71
• 
  CSS3教程(9):设置RGB颜色

  标签：Web开发

  使用新的CSS3的”RGBA”声明，不仅仅让我们像通常一样设置RGB颜色，而且还可以设置其透明度。 RGBA像RGB一样设置颜色，而这个”A”——RGBA中的最后一个值——允许我们设置该元素的透明度。就像opacity声明一样，一个opacity值为1的元素是完全不透明的，而一个opacity为0的元素是完全透明的。 浏览器兼容性 RGBA现在在Firefox、Google Chrome和Safari中都有比较好的支持，同样不需要前缀。 CSS3 RGBA 色...[ 查看全文 ]

  nswbdty

  81
• 
  CSS3中支持IE9, Firefox, Safari, Chrome的圆角

  标签：平面设计 海报设计 广告设计 画报设计 签名设计 服装设计 名片设计 画册设计 版式设计 商标设计

  W-教程博主就比较喜欢圆角的盒子模型，现在CSS3已经可以轻松实现跨浏览器的圆角效果，包括Firefox高版本，IE9，Safari，Chrome等高端浏览器。 我们这样去定义一个盒子模型： -moz-border-radius: 10px;-webkit-border-radius: 10px;border-radius:10px; 在Firefox，和Chrome中的效果： 其中 -moz-border-radius 是 Firefox 实现圆角的私有属性，而 -webkit-border-radius是 webkit 内核浏览器（如 Saf...[ 查看全文 ]

  瑞丽芳香

  11
• 
  CSS3教程:rem设置字体大小

  标签：Web开发

  在Web中使用什么单位来定义页面的字体大小，至今天为止都还在激烈的争论着，有人说PX做为单位好，有人说EM优点多，还有人在说百分比方便，以至于出现了CSS Font-Size: em vs. px vs. pt vs. percent这样的PK大局。不幸的是，仍然有不同的利弊，使各种技术都不太理想，但又无法不去用。真是进也难，退也难呀。 最近在学习em的相关知识的时候，无意之间让我拾得一宝，就是使用rem来设置Web页面的字体大小。让...[ 查看全文 ]

  gc_123456789

  261
• 
  CSS3实例教程：详解calc()函数功能

  标签：平面设计 海报设计 广告设计 画报设计 签名设计 服装设计 名片设计 画册设计 版式设计 商标设计

  calc()对大家来说，或许很陌生，不太会相信calc()是css中的部分。因为看其外表像个函数，既然是函数为何又出现在CSS中呢？这一点也让我百思不得其解，今天有一同事告诉我，说CSS3中有一个属性能实现自适应的布局，首先让我想到的是box-sizing，但跟我说还可以计算，这让我不得不想起calc()。因为早先在官网和一些blog上看到相关的介绍，但一直没有深入，也没有自己去测试过。今天花了一下午的时间彻底学习了...[ 查看全文 ]

  0000000o00

  71
• 
  用css3制作纸张效果

  标签：Web开发

  一、中规中矩的效果 所谓中规中矩的效果就是加个投影，贴个胶带什么的。效果如下： 您可以狠狠地点击这里： 中规中矩纸张效果demo 这里纸张本身的效果没有什么说头的，就是个CSS3的 box-shadow投影 效果而已，相关代码如下： -moz-box-shadow: 0 2px 10px 1px rgba(0, 0, 0, 0.2);-webkit-box-shadow: 0 2px 10px 1px rgba(0, 0, 0, 0.2);box-shadow: 0 2px 10px 1px rgba(0, 0, 0, 0.2); 反而是上面的...[ 查看全文 ]

  装修赌石翡翠

  281
• 
  圆角-简洁型css圆角矩形

  标签：Web开发

  !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=utf-8" / title简洁型css圆角矩形/title style type="text/css" .b1,.b2,.b3,.b4,.b1b,.b2b,.b3b,.b4b,.b{display:block;overflow:hidden;} .b1,.b2,.b3,.b1b,.b2b,...[ 查看全文 ]

  重走青春387

  11
• 
  CSS3实例教程：详解Media Queries片段

  标签：平面设计 海报设计 广告设计 画报设计 签名设计 服装设计 名片设计 画册设计 版式设计 商标设计

  Responsive设计在现代Web设计中可谓是越来越流行，但很同学们并未理解其真正的设计概念，往往把Responsive视为一种自适应布局。当然有很多同学也在尝试动写Responsive的案例，但如何取其断点左右纠结，如何设置哪几个断点？又从何入手？ Responsive中的断点都依赖于CSS3的Media Queries来决断。曾在CSS3 Media Queries模板、使用em单位创建CSS3的Media Queries和iPads和iPones的Media Queries有过这方面的介...[ 查看全文 ]

  爱在一sec间

  61
• 
  Illustrator实用教程：简单改变圆角矩形中一个圆角半径

  标签：Illustrator

  本文由 中国 fightting 原创，转载请保留此信息！ 在学习中遇到问题可以到 Illustrator版块 发贴交流！ 本例向朋友们介绍一个在AI中简单改变圆角矩形中一个圆角半径的小技巧，方法很简单，希望能给朋友们带来帮助~~ 制作方法： 一、先画好圆角矩形，假设改变左上角的圆角半径 二、用直接选择工具选中这个角上的两个点 三、选中后按（E）键切换到自由变换工具，把鼠标放在需调...[ 查看全文 ]

  1367077818

  3501
• 
  CSS圆角技术

  标签：Web开发

  要一个宽度不固定的框，事情变得有些复杂了。宽度不固定，就意味着这个框在水平和垂直方向都有足够灵活的变化。 为什么说这更难一些呢？因为它需要对四张图片的合适安置——每个圆角用一张。每个圆角都要独立出来，以便框能够在各个方向伸展。于是，四张图片就意味着需要四个HTML对象来作为背景图片的载体。 有一些实现办法包括在样式表中使用“生成内容”，即使用：before和:after伪类来为单独的一...[ 查看全文 ]

  鍖糕櫈

  21
• 
  CSS教程:可扩展圆角标签

  标签：Web开发

    在制作网页的时候，很流行使用标签的方式进行分类显示， 圆角标签 具有样式美观、表现方式形象的优点，一般我们都会将圆角标签的背景制作成一张图片，这样做的不足之处是如果标签文字字数变化（如图1），固定的背景图片不能随之进行扩展。这样我们就需要制作很多张不同宽度的背景图片，很不方便。下面介绍两种制作可扩展圆角标签的方法。 图1       描边圆角标签 ...[ 查看全文 ]

  年轻的样子day

  41
• 
  CSS实例教程：纯CSS3编写的面包屑导航

  标签：平面设计 海报设计 广告设计 画报设计 签名设计 服装设计 名片设计 画册设计 版式设计 商标设计

  随着Web技术越来越先进，浏览器更新换代也很快，在国内很多网站已经有使用css3和html5的技术了，所以我们也应该多学习这些新知识，设计达人网站整理的资料，你在学校、图书上也是未必能看到的。 今天我们整理了10个纯CSS3制作的 面包屑导航 ，这些都是通过CSS3来编写，十分方便，而且实用。有些文章附有教程，大家可以学习研究一下。 漂亮面包屑导航 扁平化 面包屑导航 圆形风格面包屑导航 CS...[ 查看全文 ]

  905167571

  141
• 
  CSS3盒模型display:box详解

  标签：Web开发

  display:box;box-flex是css3新添加的盒子模型属性，它的出现可以解决我们通过N多结构、css实现的布局方式。经典的一个布局应用就是布局的垂直等高、水平均分、按比例划分。 目前box-flex属性还没有得到firefox、Opera、chrome浏览器的完全支持，但可以使用它们的私有属性定义firefox(-moz-)、opera(-o-)、chrome/safari（-webkit-)。 一、box-flex属性 box-flex主要让子容器针对父容器的宽度按一定规则...[ 查看全文 ]

  yingzi0156

  31
• 
  NiftyCube——轻松实现圆角边框

  标签：Web开发

  实在是太方便了，只要一句话，就能让目标div变成圆角，就像这样 代码如下： script type="text/javascript" src="niftycube.js"/script script type="text/javascript" window.onload=function(){ Nifty("div#content,div#nav"); } /script 这句话的意思就是使id为content和nav的div变成圆角 demo：http://www.healdream.com/upload/html/NiftyCube/nifty2.html 当然这只是其中的一种...[ 查看全文 ]

  爱尚KTV唐飞

  131
• 
  17款有趣实用的CSS3悬停效果教程

  标签：平面设计 海报设计 广告设计 画报设计 签名设计 服装设计 名片设计 画册设计 版式设计 商标设计

  这里是我们收集的一些很有用的CSS 3悬停效果教程合集。 HTML 5和CSS 3拓展了网页设计的可能性，它们引入了很多新属性来让你的网站变得丰富而饱满。在这篇文章中，我分享了18个CSS3悬停效果的教程，来让你的网站变得饱满并且传达更好的用户体验。本文介绍了CSS 3的动画属性，使用这个属性可以不用费多大力气就创建出一个悬停效果。我们希望你会觉得我们收集的CSS 3悬停效果教程合集是有用的，另外如果你知道...[ 查看全文 ]

  Qing蛙哥

  551
• 
  CSS3中如何实现渐变效果

  标签：平面设计 海报设计 广告设计 画报设计 签名设计 服装设计 名片设计 画册设计 版式设计 商标设计

  渐变可以创建类似于彩虹的效果，低版本的浏览器不的不使开发者用图片来实现，CSS3将会轻松实现网页渐变效果。 要得上面的线性渐变效果，我们这样去定义CSS3样式： background-image: -moz-linear-gradient(top, #8fa1ff, #3757fa); /* Firefox */background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, #ff4f02), color-stop(1, #8f2c00)); /* Saf4+, Chrome */filter: prog...[ 查看全文 ]

  小小妞91

  171