从零单排之CSS3

刘福发布于2019-08-28 17:59 / 2783人阅读

摘要：概览大法好今夜秋风阵阵，雾霾层层。布局选择多媒体，字体响应就是屌。说起来条目繁多，乍看之下与之前比起来复杂了好多。圆角指的即使一般正式的写法为效果请看任意一个按钮即可写到此处不禁跟大家说，最好还是配合预编译来写。

CSS3 概览

CSS3大法好

今夜秋风阵阵，雾霾层层。不禁让人想作诗，不过考虑到自己才华实在有限的有点有限，就不丢人了，只做一首就好了。

CSS3大法真是好， 前端群众学到老。
圆角阴影好旋转， 移动扭曲加缩放。
颜色渐变和背景， 伪类动画跑不了。
布局选择多媒体， 字体响应就是屌。

CSS3说起来条目繁多，乍看之下与之前CSS2比起来复杂了好多。其实多出的部分主要归结为两点：
1.是各浏览器厂商的前缀（-webkit, -moz, -o）
2.则是CSS3新增的动画，由于是新增的，所以看着陌生。
第一点和第二点结合起来就会导致css的代码看起来老长老长。
所以如果你弄清这一点的话，应该对于CSS3就不会显得那么头大了。

CSS3 简介

简介就是简单介绍，那么下面让我以《CSS3大法好》来和大家简单介绍一下CSS3，希望能帮助大家更好的去学习CSS3。
圆角指的即使border-radius, 一般正式的写法为：

div {
    -webkit-border-radius: 3px;
       -moz-border-radius: 3px;
         -o-border-radius: 3px;
            border-radius: 3px;
}

效果请看sf任意一个按钮即可
写到此处不禁跟大家说，CSS3最好还是配合CSS预编译来写。可选的有LESS，SASS，Stylus(这个没接触过) 额外插一句最近看SASS，发现SASS优于LESS最明显一点是SASS有compass，而LESS毛都木有。跑题了...
言归正传，其实CSS3不仅带来了圆角，同时也带来了border-image,看属性名大家应该知道是什么意思了。
阴影其实可以分为两部分看text-shadow和box-shadow，不过虽然两个都是dow，但是待遇仍是不那么一样，首先不同一点就是两个属性的值不同：

div {
    box-shadow: none | [inset? && [   ? ? ? ] ]
    (内阴影) x轴偏移， y轴偏移，(模糊)， 颜色
    text-shadow: none | [,]* where  is: [ ?   ? |   ? ? ]
    颜色，x轴偏移，y轴偏移，(模糊) 或者 x轴偏移，y轴偏移，(模糊)，颜色
    //举个例子
    box-shadow: 4px 4px 5px #f00;
    text-shadow: #f00 4px 4px 5px;
}

然后text-shadow是IE10， box-shadow是IE9。
随便写写居然这么多了，其他的放在第二期吧。
(PS: 大家觉得我有必要写一些demo吗，直接放在github上面给大家参考？)

GPU云服务器云服务器单排 css3 css3气泡 css3动画

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/110932.html

从零单排系列之写一个类vue框架(一)

摘要：因为我希望这是一个系列的文章，所以开始之前先简单说一下，我几乎没用过这个框架写过项目，所以文章中难免会有一些比较外行的说法。先整理用法，然后再整理自己的框架。因为我希望这是一个系列的文章，所以开始之前先简单说一下，我几乎没用过vue这个框架写过项目，所以文章中难免会有一些比较外行的说法。当然，我用过一些时间的angular，也曾经解决过一些同行们vue方面的问题。所以如果有人原因看的...

raise_yang 2019-08-23 18:26 评论0 收藏0
从零单排系列之写一个类vue框架(二)

摘要：昨天写了一下节点绑定的替换，已经如何检测的方法今天优化一下，勉强实现一个双向绑定看下昨天的代码这里是在实现双向绑定之前，先普及一个和的知识。如果强行给之前的赋值，就会发生无限的情况。毕竟还在正式学习期。昨天写了一下节点绑定model的替换，已经如何检测model 的方法今天优化一下，勉强实现一个双向绑定看下昨天的代码 function Vue(obj) { ...

learn_shifeng 2019-08-23 18:27 评论0 收藏0
前端从零单排之AJAX(第一期)

摘要：作为一个有追求的前端，这是不可以接受的。两大特性在不刷新页面的情况下向服务器端发送请求从服务器端接收数据，并进行对应的逻辑处理请求流程首先先建立一个异步请求对象第一步的对象设置已经好了。在闭包中进行相关的操作。 ajax的使用一直是以jQuery为主，对于底层的实现有点不明觉厉。作为一个有追求的前端，这是不可以接受的。便让我们今晚好好走进ajax的内心世界。 ajax 两大特性： ...

Mertens 2019-08-21 12:17 评论0 收藏0
前端从零单排之Gulp(第二期)

摘要：是个类似于的前端工作流工具，今天就简单的介绍一下和一些我的使用感受在中安装全局切换到你的前端工作目录下确保你的前端工作目录下有这个文件然后就已经安装好了，马上就可以进入简单的配置了。但是在使用的工作之中会遇到一些问题。 gulp 是个类似于grunt的前端工作流工具，今天就简单的介绍一下gulp和一些我的使用感受 Installing gulp 在Terminal中安装全局gulp...

xiaolinbang 2019-08-21 12:17 评论0 收藏0
前端从零单排之LESS（第四期)

摘要：函数更多的用处在于封装一些需要加前缀的属性，或是多个参数的属性，同时命名一定要足够的语义化。适当嵌套，以保持的优雅。有时要考虑兼容性，需要避免编译某条属性，方法即在值的前面加一个符号具体如下安装同时推荐在线编译网站，能够实时看到效果。 LESS 是一门CSS预编译语言，犹记得当初打算使用CSS预编译语言的时候，可选的有SASS、LESS、Stylus三门，刚好那个时候在学习bootst...

Drummor 2019-08-28 17:55 评论0 收藏0