CSS3之边框圆角、边框阴影和字体阴影

1.边框圆角

在早期如果想要制作四周有圆角的元素时,需要专门制作一张图片(这其实没什么),但是试想一下,如果要修改圆角的各种关系,比如颜色,半径等等,必须去重新修改图片才能够实现(十分麻烦).

在html5中针对这个效果专门推出了一个属性border-radius
w3c_CSS3边框讲解页面

使用方法:

• 属性名:
  • border-radius
• 赋值方法:
  • 赋值的方法类似于margin

---

          background-color: rebeccapurple;
          border-radius:20px;
          /*设置四周的圆角*/     

设置四周的圆角.png

---

            background-color: aqua;
            border-radius: 50px 10px;
            /*上左下右,上右下左 */

上左下右,上右下左.png

---

            background-color: seagreen;
            border-radius: 50px 30px 10px;
            /*上左,上右下左,下右*/

上左,上右下左,下右.png

---

            background-color: chartreuse;
            border-radius: 50px 40px 30px 20px;
            /*上左,上右,下右,下左*/

上左,上右,下右,下左.png

---

            background-color: magenta;
            border-radius: 50px/100px;
            /*上下的圆角/左右的圆角*/

上下的圆角/左右的圆角.png

---

            background-color: palevioletred;
            border-top-left-radius: 40px;
            /*上左*/
            border-top-right-radius: 10px;
            /*上右*/
            border-bottom-left-radius: 20px;
            /*下左*/
            border-bottom-right-radius: 50px;
            /*下右*/

上左,下右,上右,下左.png

小结:

该属性的用法十分简单,只要搞清楚四边的对应关系,就能够制作各种精美组合效果

边框阴影

除了可以为元素的四周设置倒圆角以外,CSS3还为我们提供了阴影的功能,能够制作更为精美的外观
w3c_CSS3边框讲解页面

使用方法

• 属性名:

  • box-shadow

• 可选值:

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

• 示例代码

  • 这里青色的为li标签

---

            box-shadow:-10px 20px red;

shaw1.png

---

            box-shadow: 5px 5px 20px pink;
            /*x偏移值,y偏移值,影子四周模糊程度,影子颜色*/

shaw2.png

---

            box-shadow: 5px 5px 0px 5px red;
            /*x偏移值,y偏移值,影子四周模糊程度,影子额外的长度,影子颜色*/
            /*影子默认跟元素一样大*/

shaw3.png

---

            box-shadow: inset 0px 0px 100px yellow;
            /*添加了inset以后,影子会往内部伸展,其他的都是一样的*/

shaw4.png

---

            box-shadow: 5px 5px yellow,-5px -5px blue,10px 10px green;
            /*多个影子的添加 只需要使用逗号分隔即可 */

shaw5.png

• 注意:
  • 这里演示的只是基本用法,实际开发中配合更高的审美观,能够制作更为精美的页面

字体阴影

这个属性的使用十分类似box-shadow

基本使用

• 属性名: text-shadow

• 赋值方法_3个值:

  • 5px 5px red
  • x偏移值,y偏移值,阴影颜色

字体阴影.png

• 赋值方法_4个值:
  • 5px 5px 10px pink
  • x偏移值,y偏移值,阴影模糊程度,阴影颜色

字体阴影_模糊.png

• 赋值方法_多个阴影
  • 5px 5px red,10px 10px yellow;
  • 通过逗号的来分隔不同的阴影

字体阴影_多个阴影.png

Demo(凹凸文字)

首先让我们来看看字体的具体外观

凹凸字体实例.png

• 凹字体:
  • 参照上图,当阳光从左上角照射时,字体是凹进去时,内部的轮廓线会被照射为白色
• 凸字体:
  • 参照上图,当阳光从左上角照射时,字体是凸起时,右上角的轮廓线会被照射为白色

• 分析:

  • 阳光照射的轮廓线在上或者是在下就可以让我们产生这是凹,凸字体的错觉

• 具体代码:

    
    
    


点击去看魔兽世界大电影_凹下


点击去看魔兽世界大电影_凸起