精通CSS+DIV网页样式与布局--图片效果

用蓝水洗手

于 2019-02-12 21:45:54 发布

阅读量394

点赞数

CC 4.0 BY-SA版权

本文链接：https://blog.youkuaiyun.com/qq_43682716/article/details/87118596

提到图片效果，小伙伴们可能会想到美图秀秀，ps等，这些软件都是款非常不错的照片处理软件，包括常用的：黑白，增强，高斯，高对比，夜视，老照片和铅笔画等等。不管你是否是专业的照片拍摄人员，我们都可以通过照片处理软件轻松实现自己想要的照片效果。这篇博客，小编将继续来总结CSS+DIV的其她效果来进行分析，有兴趣的小伙伴可以点击以下链接，了解小编之前讲解过的关于CSS的一些基础知识：
精通CSS+DIV网页样式与布局--初探CSS
精通CSS+DIV网页样式与布局--CSS文字效果
 精通CSS+DIV网页样式与布局--CSS段落效果
上篇博客，小编主要讲解了有关段落的知识，这次来讲图片的效果，我们看是如何控制图片显示的效果。首先，我们来看一张图：

接下来，小编顺着上述图示的脉络对各个知识点进行一一讲解，在实战中更好的掌握：

图片效果

图片边框

首先，我们来看一段例子的代码和运行效果：

<span style="font-size:18px;"><span style="font-size:18px;"><html>  <head>  <title>边框</title>  <style>  <!--  img.test1{      border-style:dotted;    /* 点画线 */      border-color:#FF9900;   /* 边框颜色 */      border-width:5px;       /* 边框粗细 */  }  img.test2{      border-style:dashed;    /* 虚线 */      border-color:blue;      /* 边框颜色 */      border-width:2px;       /* 边框粗细 *  }  -->  </style>     </head>  <body>      <img src="banana.jpg" class="test1">      <img src="banana.jpg" class="test2">  </body>  </html>  </span></span>

效果如下所示：

分析一下上面的代码，border-style:控制线条的样式（是点画线还是虚线）；border-color：很显然就是控制颜色了；border-width：控制边框的粗细程度。同时，border控制边框的时候，不但可以采用代码里边那样的方式，同时我们可以把所有的代码合成一句，我们可以这么写，代码和运行效果如下所示：

<span style="font-size:18px;"><span style="font-size:18px;"><html>  <head>  <title>边框</title>

最低0.47元/天解锁文章

200万优质内容无限畅学