美文网首页
阴影/外发光

阴影/外发光

作者: 一名有马甲线的程序媛 | 来源:发表于2017-11-22 11:28 被阅读39次

块级元素阴影/外发光:

box-shadow: h-shadow v-shadow blur spread color inset;

注释:
| h-shadow | 必需。水平阴影的位置。允许负值。 | 测试 |
| v-shadow | 必需。垂直阴影的位置。允许负值。 | 测试 |
| blur | 可选。模糊距离。 | 测试 |
| spread | 可选。阴影的尺寸。 | 测试 |
| color | 可选。阴影的颜色。请参阅 CSS 颜色值。 | 测试 |
| inset | 可选。将外部阴影 (outset) 改为内部阴影。 | 测试 |


文字阴影/外发光:

p{
    text-align: center;
    padding: 24px;
    margin: 0;
    font-family: helvetica,arial,sans-serif;
    color: #d1d1d1;
    font-size: 80px;
    font-weight: bold;
}
.p1{
    text-shadow:-1px 0 black,
                 0 1px black,
                 1px 0 black,
                 0 -1px black;
}
.p2{
    text-shadow:0 0 0.2em rgba(240,239,238,0.55),
               -0 -0 0.2em rgba(240,239,238,0.55);
}

效果图如下:


image.png

相关文章

  • 阴影/外发光

    块级元素阴影/外发光: 注释:| h-shadow | 必需。水平阴影的位置。允许负值。 | 测试 || v-sh...

  • iOS 效果处理(内阴影、外阴影、外发光、内发光、投影)

    iOS 效果处理(内阴影,外阴影,外发光,内发光,投影) 前言 最近在做效果处理,其中遇见了一些问题,写篇文章记录...

  • 关于阴影

    自发光材质不产生阴影

  • css3 box-shadow阴影(外阴影与外发光)讲解

    https://www.cnblogs.com/telwanggs/p/7736454.html 基础说明: **...

  • box -shadow阴影 发光

    为了更好的了解box-shadow的特征,做几个小测试:(为了方便直接在标签内嵌套样式) 测试1: box...

  • 给点阴影就发光

    用电热水壶烧水的事情,相信在现今社会是司空见惯的。水开不开靠自动开关,至于通不通电水壶上设有一个指示灯,灯光是橘红...

  • ps 外发光

    ps练习做外发光

  • 按钮练习

    小小按钮 主要运用描边、内阴影、外发光等效果,简单临摹了一下,细节还可以再处理多一点,我给的效果都很淡,稍微感觉到...

  • PS 绘制发光质感 LOGO

    在这个 LOGOPS教程里,主要是训练颜色、阴影、质感和字体设计等综合表现,比如颜色的渐变,如何实现发光效果,阴影...

  • Android 图标外发光

    开发中遇到美工出的图标是外发光,确实好看,可直接切外发光的图标,效果没有设计图上好,那么只能Android自己实现...

网友评论

      本文标题:阴影/外发光

      本文链接:https://www.haomeiwen.com/subject/hndnvxtx.html