CSS3 Please:在线生成跨浏览器的CSS3代码

2016-02-20 00:29 14 1 收藏

有一种朋友不在生活里,却在生命力;有一种陪伴不在身边,却在心间。图老师即在大家的生活中又在身边。这么贴心的服务你感受到了吗?话不多说下面就和大家分享CSS3 Please:在线生成跨浏览器的CSS3代码吧。

【 tulaoshi.com - Web开发 】

一个在线生成跨浏览器的CSS3代码的网站,很直观,也很方便,现在支持的CSS 3属性有圆角、阴影、渐变、自定义字体、旋转、rgba色彩。即将支持的还有其他的一些 css transform。

用法很简单,点击属性值直接修改就可以及时预览。toggle rule on和toggle rule off按钮可以启用或禁用某个属性。

(本文来源于图老师网站,更多请访问https://www.tulaoshi.com/webkaifa/)

即刻体验:

事实上,现在支持这些CSS3属性的浏览器大都没有完全的支持W3C标准属性,而是采用自己的私有属性,这显然增加了开发的复杂度,也给将来的维护带来一些不确定性。不过貌似chrome dev版开始支持原生的border-radius了。

和 创建了一个有趣的实例站点,内容关乎大量参数可调整的 CSS 示例,支持参数修改后的即时预览功能。

将会带你领略这些令人意想不到的 CSS 新规则:

(本文来源于图老师网站,更多请访问https://www.tulaoshi.com/webkaifa/)

1. border-radius
2. box shadow
3. gradients
4. rgba support in backgrounds
5. transforms
6. font-face

这是一个非常适合学习 CSS3 的页面,有兴趣不妨一试。

官方网站:

来源:https://www.tulaoshi.com/n/20160220/1631935.html

延伸阅读
标签: Web开发
如何检测用户的浏览器是否支持CSS3,我们需要使用HTML,CSS和JavaScript来完成这件事情。下面是步骤。 1)先制作下面的HTML 1.span id="check" rel="Detect"/span 2)然后书写下面的CSS 01.#check { 02.  display: none; 03.  width: 0; 04.  height: 0; 05.} 06.#check[rel^="D"] {...
前一段时间,我经常收到一个关于如何在IE浏览器中使用CSS3的 border-radius 属性实现圆角HTML元素的问题。你或许知道CSS3的border-radius 属性被Safari、Firefox和Chrome等浏览器原生支持,但是由于某些原因IE并不支持它。 那么要想在IE中实现圆角,你不得不使用一些技巧,比如使用带有背景图片的CSS类(看一下这篇文章)。 而我知道的在各个浏...
标签: Web开发
使用CSS3 HSL声明同样是用来设置颜色的。下一个呢? HSLA? 是的,这个和RGBA的效果是一样的。 上一篇文章:CSS3教程(9):设置RGB颜色 HSL声明使用色调Hue(H)、饱和度Saturation(s)和亮度Lightness(L)来设置颜色。 Hue 衍生于色盘:0和360是红色,接近120的是绿色,240是蓝色。 Saturation 值是一个百分比:0%是灰度,100%饱和度最高 ...
标签: Web开发
CSS3透明不透明渐变随便你怎么叫它吧!这里是一些使用CSS3透明度的指南以及一些例子。 其实这个firefox很久以前就支持了,而IE一直不支持! 上一篇文章:CSS3教程(7):CSS3嵌入字体 opacity声明用来设置一个元素的透明度:层、文字、图片等一个opacity的值为1的元素是完全不透明的,反之,值为0是完全透明的,看不见的。1到0之间的任何值...
  最近闲来无事,上W3C转了一圈,粗略地浏览了一下尚未发布的CSS3,虽然还未被W3C正式发布出来,但还是能从已有的资料中窥出一些端倪,一个很明显的特征,CSS3制订得越来越细致了,某些细节之处完全超乎你所能想象的到的范围。 在这里不提及CSS3的语法,因为对于目前尚未有软件支持的CSS3,任何语法的探讨都像是空中楼...

经验教程

26

收藏

41
微博分享 QQ分享 QQ空间 手机页面 收藏网站 回到头部