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