Question

圆角-阴影

• 边框圆角
  • 在 CSS2 中添加圆角矩形需要技巧。我们必须为每个圆角使用不同的图片
  • 在 CSS3 中，创建圆角是非常容易的
  • 在 CSS3 中， border-radius 属性用于创建圆角
• border-radius 边框圆角写法
  • border-radius: 2em 1em 4em / 0.5em 3em;
  • 等价于

    border-top-left-radius: 2em 0.5em;
    border-top-right-radius: 1em 3em;
    border-bottom-right-radius: 4em 0.5em;
    border-bottom-left-radius: 1em 3em;

• box-shadow 方框添加阴影
  • 语法： box-shadow:x-shadow y-shadow blur spread color inset;
  • box-shadow 的 API
    • x-shadow 必需。水平阴影的位置。允许负值。
    • y-shadow 必需。垂直阴影的位置。允许负值。
    • blur 可选。模糊距离。
    • spread 可选。阴影的尺寸。
    • color 可选。阴影的颜色。请参阅 CSS 颜色值
    • inset 可选。将外部阴影 ( outset ) 改为内部阴影
  • 实例： box-shadow:10px 10px 5px 5px #888888;

边框系列-图片

• border-image 语法

属性	版本	简介
border-image	CSS3	设置或检索对象的边框使用图像来填充
border-image-source	CSS3	设置或检索对象的边框是否用图像定义样式或图像来源路径
border-image-slice	CSS3	设置或检索对象的边框背景图的分割方式
border-image-width	CSS3	设置或检索对象的边框厚度
border-image-outset	CSS3	设置或检索对象的边框背景图的扩展
border-image-repeat	CSS3	设置或检索对象的边框图像的平铺方式

• border-image-slice
  • 设置或检索对象的边框背景图的分割方式

• border-image-repeat
  • 用于指定边框背景图的重复方式
  • 取值：
    • stretch ： 指定用拉伸方式来填充边框背景图。 *默认的
    • repeat ： 指定用平铺方式来填充边框背景图。当图片碰到边界时，如果超过则被截断。
    • round ： 指定用平铺方式来填充边框背景图。图片会根据边框的尺寸动态调整图片的大小 直至正好可以铺满整个边框。写本文档时仅 Firefox 能看到该效果