还记得在中，我们是第一次调用本地图片！
在中，我们在figuer中，也调用了一下下。
这次，我们利用边框样式，为「鱼C」Logo，提升下B格！
在此之前，重温下，两种调图方式
1代码如下：
!doctypehtml
html
head
metacharset="utf-8"
styletype="text/css"
html,body{
height:%;
}
body{
background:url(FishC.png)centercenter;
background-repeat:no-repeat
}
/style
/head
body
/body
效果图，纯粹版的：
简单解释下background-repeat:no-repeat
如果不设置下的话，就会满屏都是Logo，效果立刻很恶心。。。
是不是一下就把咱们鱼C高贵的气质，拉下来了！
这样怎么对得起小甲鱼老湿的信任呢～
2现在，用img在实现下上面的效果。
有言在先，有几点注意的，之前没说。
请注意：
img元素向网页中嵌入一幅图像，从技术上讲，img标签并不会在网页中插入图像，而是从网页上链接图像。
img标签创建的是被引用图像的占位空间。
img标签有个必需的属性：src属性
你可以这么理解，src‘调取’本地图片。
另一个，alt属性，就是添加图片名而已，可你自己了。
上代码：
!doctypehtml
html
head
metacharset="utf-8"
styletype="text/css"
html,body{
height:%;
text-align:center;
}
/style
/head
body
imgsrc="FishC.png"
/body
看一下效果，其实没啥太大变化：
好了，复习深化结束！
可以正式设计边框样式了。
矩形边框
在CSS中设计边框，就是border！
有三个常用属性，边框宽度、点/线、颜色
直接在CSS格式中，实践下：点框、宽度为6px、颜色#6F6（鱼C主色）
!doctypehtml
html
head
metacharset="utf-8"
styletype="text/css"
html,body{
height:%;
text-align:center;
}
img{
border:6pxdotted#6F6;
}
/style
/head
body
imgsrc="FishC.png"
/body
效果图：
只需要将dotted（虚点的）修改为solid（实心的）
img{
border:6pxsolid#6F6;
}
效果图：
好方阿！
赶紧修改成最Fashion的圆角矩形，border-radius
唯一要注意的是，这个属性值，要用%，多用几遍就知道什么时候用%了
img{
border:6pxsolid#6F6;
border-radius:6%;
}
效果图：
嗯，这才对嘛，整个世界都祥和了
圆形边框
radius啥意思？
半径！
So，当border-radius的值，大于等于50%时，就是圆形了。
就这么简单
img{
border:6pxsolid#6F6;
border-radius:51%;
}
效果图：
如果喜欢本系列HTML帖子
欢迎到鱼C论坛订阅专辑?
HTML5-庖丁解牛
戳原文，更有料！预览时标签不可点收录于合集#个上一篇下一篇