SegmentFault 前端那些事最新的文章
2016-05-18T23:19:30+08:00
https://segmentfault.com/feeds/blogs
https://creativecommons.org/licenses/by-nc-nd/4.0/
border、outline、boxshadow那些事以及如何做内凹圆
https://segmentfault.com/a/1190000005153660
2016-05-18T23:19:30+08:00
2016-05-18T23:19:30+08:00
奇商_
https://segmentfault.com/u/hecz
50
<h3>border</h3>
<p>边框是我们美化网页、增强样式最常用的手段之一。例如:</p>
<pre><code><div class="text"></div>
.text {
width: 254px;
height: 254px;
background-color: #33AAE1;
border: 10px solid #03D766;
}
</code></pre>
<p><img src="/img/bVvMPj" alt="图片描述" title="图片描述"></p>
<p>但有些时候,我们的需求是给一个容器加上多重边框,最容易想到的是给它多加一层标签:</p>
<pre><code><div class="text-outborder">
<div class="text"></div>
</div>
.text-outborder {
width: 274px;
height: 274px;
border: 10px solid #03D766;
}
.text {
margin: auto;
width: 254px;
height: 254px;
background-color: #33AAE1;
border: 10px solid #03D766;
}</code></pre>
<p><img src="/img/bVvMPq" alt="图片描述" title="图片描述"></p>
<p>不过有些时候,我们可能无法修改结构,或者修改结构的成本很高,此时就需要我们在纯 CSS 层面解决这个问题。</p>
<h3>outline</h3>
<p>这时候可以通过 <code>outline</code> 属性来解决:</p>
<pre><code>.text {
width: 254px;
height: 254px;
background-color: #33AAE1;
border: 10px solid #03D766;
outline: 10px solid #BC9E9C;
}</code></pre>
<p><img src="/img/bVvMPx" alt="图片描述" title="图片描述"></p>
<p>描边有一个好处在于,它跟边框类似,可以设置各种线型,比如虚线:</p>
<pre><code>.text {
width: 254px;
height: 254px;
background-color: #33AAE1;
border: 10px solid #03D766;
outline: 5px dashed #CE843B;
}
</code></pre>
<p><img src="/img/bVvMPD" alt="图片描述" title="图片描述"></p>
<p>有趣的是,还有一个 <code>outline-offset</code> 属性,可以控制描边的偏移量。</p>
<pre><code>.text {
width: 254px;
height: 254px;
background-color: #33AAE1;
border: 20px solid #03D766;
outline: 5px dashed #FFF;
outline-offset: 10px;
}</code></pre>
<p>我们可以把 <code>outline</code> 扩展出去:<br><img src="/img/bVvMPG" alt="图片描述" title="图片描述"></p>
<h3>outline-offset</h3>
<p>而且 <code>outline-offset</code> 还支持负值,可以将 <code>outline</code> 叠加在 <code>border</code> 之上:</p>
<pre><code>.text {
width: 254px;
height: 254px;
background-color: #33AAE1;
border: 20px solid #03D766;
outline: 5px dashed #FFF;
outline-offset: -12px;
}</code></pre>
<p><img src="/img/bVvMPR" alt="图片描述" title="图片描述"></p>
<p>利用这个特性可以玩出很多好玩的效果。</p>
<p>不过描边有一个缺陷——如果这个容器本身有圆角的话,描边并不能完全贴合圆角。目前所有浏览器的行为都是这样的:<br><img src="/img/bVvMPV" alt="图片描述" title="图片描述"></p>
<h3>box-shadow</h3>
<p>如果你需要使用圆角,那么你就得另寻它法了。接着,我们又想到了 <code>box-shadow</code> 属性:</p>
<p>我们通常是这样设置投影的:</p>
<pre><code>box-shadow: 0 5px 5px #000;</code></pre>
<p><img src="/img/bVvMPZ" alt="图片描述" title="图片描述"></p>
<p>前面三个长度值,再加一个颜色值。</p>
<p>前两个长度值分别表示投影在水平和垂直方向上的偏移量,第三个长度值表示投影的模糊半径(也就是模糊的程度);颜色值就是投影的颜色。</p>
<p>如果我们把前三个值都设为零,实际上是没有任何效果的。因为如果投影即不偏移也不模糊,刚好会被这个元素自己严严实实地遮住。</p>
<h3>box-shadow第四个长度值</h3>
<p>很多人可能不知道的是,投影还可以有第四个长度值。这个值表示投影向外扩张的程度:</p>
<pre><code>box-shadow: 0 0 0 10px #FF0000;</code></pre>
<p><img src="/img/bVvMP1" alt="图片描述" title="图片描述"></p>
<p>这样,投影就会从元素的底下露出一圈了。</p>
<p>关于投影,另外一个不是每个人都知道的特性是,投影属性其实可以接受一个列表,我们可以一次赋予它多层投影,像这样:</p>
<pre><code>.text {
width: 254px;
height: 254px;
background-color: #33AAE1;
border: 20px solid #03D766;
border-radius: 50px;
box-shadow:
0 0 0 10px #FB0000,
0 0 0 20px #FBDD00,
0 0 0 30px #00BDFB;
}</code></pre>
<p><img src="/img/bVvMP4" alt="图片描述" title="图片描述"></p>
<p>这样我们就得到了超过两层的 “边框” 效果了。</p>
<p>投影的另外一个好处是,它的扩张效果是根据元素自己的形状来的。如果元素是矩形,它扩张开来就是一个更大的矩形;如果元素有圆角,它也会扩张出圆角。</p>
<h3>注意事项</h3>
<p>由于描边和投影都是不影响布局的,所以如果这个元素和其它元素的相对位置关系很重要,就需要我们以外边距等方式来为这些多出来的 “边框” 腾出位置,以防被其它元素盖住。</p>
<p>因此,从这个意义上来说,使用内嵌投影似乎是更好的选择。因为内嵌投影让投影出现在元素内部,我们可以用内边距在元素的内部消化掉这些额外 “边框” 所需要的空间,处理起来更容易一些。</p>
<h3>内凹圆</h3>
<p>标签页我们都很熟悉了,它是一种常用的 UI 元素。<br><img src="/img/bVvMQk" alt="图片描述" title="图片描述"></p>
<p>我们把它拉近来看一看:<br><img src="/img/bVvMQl" alt="图片描述" title="图片描述"></p>
<p>这个标签还是比较美观的,我们用圆角让它看起来很接近真实的标签造型。不过我们也注意到,它底部的两个直角看起来似乎有点生硬。</p>
<p>所以设计师原本期望的效果可能是这样的:<br><img src="/img/bVvMQo" alt="![图片描述" title="![图片描述">][14]</p>
<p>这样就自然多了。但这看起来似乎很难实现啊!</p>
<p>我们的难点主要在这里:<br><img src="/img/bVvMQn" alt="图片描述" title="图片描述"></p>
<p>这个特殊的形状如何实现?</p>
<p>我们把它放大来看一下:<br><img src="/img/bVvMQv" alt="图片描述" title="图片描述"></p>
<p>首先我们可能会想到用图片。这当然是可行的,但图片有种种局限,我们最好还是完全用 CSS 来实现它。</p>
<p>好,接下来我们来分析一下它的形状。它其实就是一个方形,再挖掉一个 90° 的扇形。于是我们试着创建一个方形,再用背景色做出一个扇形叠加上去:<br><img src="/img/bVvMQw" alt="图片描述" title="图片描述"></p>
<p>看起来好像可以了。但这是骗人的啊!</p>
<p>把它放在复杂背景下,立马就露馅了——扇形部分不是透明的:<br><img src="/img/bVvMQx" alt="图片描述" title="图片描述"></p>
<h3>如何实现内凹圆角</h3>
<p>所以,我们的问题就变成了如何用CSS实现内凹圆角。</p>
<p>对于普通外凸的圆角,我们都已经非常熟悉了,我们用圆角属性就可以得到:<br><img src="/img/bVvMQC" alt="图片描述" title="图片描述"></p>
<p>但我们需要的是一个内凹的圆角形状。</p>
<p>这是一个实实在在的需求,于是有开发者曾经提议,扩展圆角属性,让它支持负值。如果是负值,圆角就不再是外凸的,而是内凹的。这个提议听起来似乎很有道理,语法设计也很紧凑。<br><img src="/img/bVvMQK" alt="图片描述" title="图片描述"></p>
<p>但实际上它的语义不够准确。因此 CSS 工作组并没有接受这个提议,并未将它纳入标准。<br><img src="/img/bVvMQD" alt="图片描述" title="图片描述"></p>
<p>这条路走不通,我们还需要继续探索。</p>
<p>我们顺着这个方向,头脑中很自然地会迸出这个疑问:CSS中还有和圆形有关的属性吗?</p>
<p>答案当然是有!</p>
<h3>径向渐变</h3>
<p>“径向渐变” 特性就是跟圆形有关的。</p>
<h3>线性渐变</h3>
<p>不过它稍稍有些复杂。在讲解径向渐变之前,我们先来看一看比较简单的 “线性渐变”。<br><img src="/img/bVvMQU" alt="图片描述" title="图片描述"></p>
<p>说到渐变,那自然需要有一个容器。然后,还需要有两种颜色。渐变的颜色设置我们称之为 “色标”——每个色标不仅有颜色信息,还有位置信息。</p>
<p>我们给起点和终点的色标分别设置颜色,就可以得到一条渐变图案:<img src="/img/bVvMQZ" alt="图片描述" title="图片描述"></p>
<p>接下来,关于渐变,我们其实可以设置不止两个色标。比如我们可以在中央再增加一个色标。请注意我们特意选择了跟起点色标一样的颜色。我们得到的效果如下:<br><img src="/img/bVvMQ0" alt="图片描述" title="图片描述"></p>
<p>我们发现,渐变只发生在颜色不同的色标之间。如果两个色标的颜色相同,则它们之间会显示为一块实色。</p>
<p>好的,我们继续增加色标。这次我们在渐变地带的中央增加一个色标,且让它的颜色和终点色标相同:<br><img src="/img/bVvMQ4" alt="图片描述" title="图片描述"></p>
<p>根据上面的经验,这个结果正是我们所预料的——渐变只发生在颜色不同的色标之间。</p>
<p>接下来,我们玩点更特别的,我们把中间的两个色标相互靠近直至重合,会发生什么?<br><img src="/img/bVvMQ7" alt="图片描述" title="图片描述"></p>
<p>实际上这个渐变也会趋向于零。也就是说,虽然这本质上仍然是一个 “渐变” 图案,但经过我们的精心设计之后,我们最终得到了两个纯色的色块条纹。</p>
<p>如果我们把终点颜色换为透明色……<br><img src="/img/bVvMQ8" alt="图片描述" title="图片描述"></p>
<p>我们甚至还会得到实色和透明色间隔的条纹。</p>
<h3>再来看径向渐变</h3>
<p>好的,接下来我们来看径向渐变。它稍稍有些复杂,但原理是一样的。</p>
<p>同样,我们需要有一个容器。但对径向渐变来说,顾名思议,所有色标是排布在一条半径上的。也就是说,我们还需要有一个圆心。默认情况下,圆心就是这个容器的正中心:<br><img src="/img/bVvMQ9" alt="图片描述" title="图片描述"></p>
<p>而这条半径就是圆心指向容器最远端的一条假想的线:<br><img src="/img/bVvMRa" alt="图片描述" title="图片描述"></p>
<p>接下来,我们要设置一些色标:<br><img src="/img/bVvMRd" alt="图片描述" title="图片描述"></p>
<p>说到这里,就要讲解一下径向渐变的特别之处。所有色标的颜色变化推进不是像线性渐变那样平行推进的,而是以同心圆的方式向外扩散的——就像水池里被石子激起的涟漪那样。</p>
<p>看到这个色标的分布,我们应该可以想像出线性渐变的结果是什么;但这里我们把它按照径向渐变的特征来推演一下,实际上最终的效果是这样的:<br><img src="/img/bVvMRY" alt="d4477682-427b-11e5-87fd-8e0ad91113d2.png" title="d4477682-427b-11e5-87fd-8e0ad91113d2.png"></p>
<p>我们把所有辅助性的标记都去掉,只留下渐变图案:<br><img src="/img/bVvMRg" alt="图片描述" title="图片描述"></p>
<p>这是一个穿了个窟窿的实色背景。很好玩是吧?不过不要忘了我们是为什么来到这儿的——我们是为了得到一个内凹圆角的形状。</p>
<p>细心的朋友可能已经发现了,我们需要的东西已经出现了:<br><img src="/img/bVvMRo" alt="图片描述" title="图片描述"></p>
<p>接下来,我们调整一下圆心的位置和容器的尺寸,就可以得到这个内凹圆角的造型了。<br><img src="/img/bVvMRp" alt="图片描述" title="图片描述"></p>
<h3>内凹圆具体代码例子</h3>
<p>具体代码例子如下:</p>
<pre><code>.text {
width: 254px;
height: 254px;
background:
-moz-radial-gradient(
100% 0%,
rgba(255, 255, 255, 0) 0%,
rgba(255, 255, 255, 0) 71%,
#0059FF 0%;
);
}</code></pre>
<h3>内凹圆完成</h3>
<p>利用这个技巧,我们用纯 CSS 最终实现了这个看似不可能的 “圆润的标签页” 效果!<br><img src="/img/bVvMQo" alt="图片描述" title="图片描述"></p>
<p>原文链接:<a href="https://link.segmentfault.com/?enc=GvVMQY6NcLW%2FCwMmOXj%2FXQ%3D%3D.CVHTm2UVBinodrBzIBMVCXGjlVimN3vfezrPa1YfcpSGju2m6pU6q%2FCefiUuYflZ" rel="nofollow">https://github.com/cssmagic/blog/issues/54#rd</a></p>
如何直接访问github的html项目
https://segmentfault.com/a/1190000005153433
2016-05-18T22:50:19+08:00
2016-05-18T22:50:19+08:00
奇商_
https://segmentfault.com/u/hecz
10
<h3>第一步:新建仓库</h3>
<p><img src="/img/bVvMJu" alt="图片描述" title="图片描述"></p>
<p>登陆之后,在首页右侧找到如图所示的<code>New repository</code>按钮,点击新建一个仓库</p>
<h3>第二步:填写仓库说明</h3>
<p><img src="/img/bVvMLV" alt="图片描述" title="图片描述"></p>
<p>readme文档自己选择要不要,readme是一个markdown文档,可以在其中填写一些文字内容,展示在你的仓库页面</p>
<h3>第三步:通过GitHub Desktop客户端上传demo文档</h3>
<p><img src="/img/bVvML5" alt="图片描述" title="图片描述"></p>
<h3>第四步:选择或创建一个本地仓库(用来同步到github.com)</h3>
<p><img src="/img/bVvML6" alt="图片描述" title="图片描述"></p>
<h3>第五步:第四部完成后左上角就出现了你刚在github.com上创建的仓库</h3>
<p><img src="/img/bVvML9" alt="图片描述" title="图片描述"></p>
<h3>第六步:将你的demo放在本地仓库里</h3>
<p><img src="/img/bVvMMc" alt="图片描述" title="图片描述"></p>
<h3>第七步:打开Desktop客户端,点击Commit to master</h3>
<p><img src="/img/bVvMMh" alt="图片描述" title="图片描述"></p>
<h3>第八步:点击右上角的publish发布</h3>
<p><img src="/img/bVvMMn" alt="图片描述" title="图片描述"></p>
<h3>第九步:点击sync将demo文档同步到github.com上</h3>
<p><img src="/img/bVvMMu" alt="图片描述" title="图片描述"></p>
<h3>第十步:在web端刷新,就可以看到你刚同步的demo</h3>
<p><img src="/img/bVvMMC" alt="图片描述" title="图片描述"></p>
<h3>第十一步:点击index.html进入,复制该页地址</h3>
<p><img src="/img/bVvMMH" alt="图片描述" title="图片描述"></p>
<h3>第十二步:在地址前加htmlpreview.github.io/?就可以访问了</h3>
<p><img src="/img/bVvMMK" alt="图片描述" title="图片描述"></p>