定义如下通用 CSS ：
盒阴影 box-shadow 大部分人都只是用了生成阴影，其实阴影可以有多重阴影、单侧阴影、阴影不可以不虚化，这就需要去了解一下 box-shaodw 的每一个参数具体作用
盒阴影还有一个参数 inset ，用于设置内阴影，也可以完成：
drop-shadow 是 CSS3 新增滤镜 filter 中的其中一个滤镜，也可以生成阴影，不过它的数值参数个数只有 3 个，比之 box-shadow 少一个
灵活使用 CSS3 的渐变可以完成大量想不到的图形，CSS3 的渐变简单而言分为线性渐变和径向渐变，使用线性渐变实现：
这个用的比较少，outline （轮廓）是绘制于元素周围的一条线，位于边框边缘的外围，可起到突出元素的作用。这个方法算是下下之选。
这个方法由 小火柴的蓝色理想 提供，通过改变滚动条样式实现：
抛开实用性，仅仅是模拟出这个样式的话，这个方法真的让人眼前一亮。
上述就是想到的 8 种方法，不排除有没想到的，希望有其他的方法可以在评论中提出，具体 8 种实现可以戳这里看看：
codepen-单标签左边竖条的实现方式
<style type="text/css">.left-img{float:leftposition:fixedtop:20pxleft:10px}
</style>
<img class="left-img" src="img.png" width="180" height="180" alt=""/>
注解：
<style type="text/css">....</style>/ 页内定义（CSS样式标签）
.left-img / 定义样式名称
{....} /定义样式
float:left //左浮动（float: right右浮动）
position:fixed//固定元素不随滚动条滚动 （position: absolute绝对定位，随滚动）
top:20px //距离页面顶部距离
left:10px//距离页面左侧距离
<img class="left-img" /指定给图像Img标签css样式.left-img
以上可以实现你需要的效果，但还是建议你系统化的学习下
百度关键词css 第一个站点w3school比较全面，前端架构师必读～
用css 设置页面居左，首先我们需要写好一个div然后设置好它的宽高，然后在使用margin来操作，使它距离浏览器的左边为0就行了，marign的用法如图：
添加一个border方便观察，具体看代码：
<html>
<head>
<style>
.div1{
width:600px
height:200px
font-size:13px
border:1px solid #f00
margin:0px
}
</head>
<body>
<div class='div1'>
<p>我是测试文字</p>
</div>
</body>
</html>
