css实例--边框/图片

border-image:

• border-image-source
• border-image-slice:裁剪,可以是像素值或百分比；
• border-image-width
• border-image-outset:边框偏离基准值的大小，默认0；
• border-image-repeat:stretch拉伸/repeat重复/round平铺;
  • demo  //注意中间带有参数顺序的3个参数之间需要使用斜杠
  • 这个值要考虑不同浏览器的兼容性；
  • 在firefox下看不到边框的话，先检查border-style:solid;

border-radius:

• border-top/button-left/right-radius
• border-radius:100px 25px 50px 50px / 50px 25px 50px 25px; 

border-shadow:h-shadow v-shadow [blur/*阴影模糊距离*/  spread/*阴影尺寸*/   color inset];

• 例子：
  • box-shadow:5px 8px 5px 3px red;

• •   box-shadow:5px 8px 5px 3px red inset;

搜索框：

• demo// 非响应式

微博发布框：

• demo

图片框：

• demo

标签:

• border-left/right/top/bottom: width/height    solid   color/transparent;
• demo

图片放大：

• demo