每天进步一点，其实是很了不起的事情了。
废话不多说，直接看图！
效果2
效果2
第一步(可以先把背景图搞出来，当然你也可以先画主体，最后在搞背景，看自己心情嘛)
html body {margin: 0;padding: 0;}
body {
/*no-repeat 是背景图片，且只显示一次*/
background: url(img/img.jpg) no-repeat;
/*背景图片完全覆盖背景区域*/
background-size: cover;
}
上面代码写完，就会出现这个效果了
背景图片
现在呢，画主体，(先画一个框，并且在屏幕中间)
主体
视觉上的效果？用到了什么技术呢？
(1)背景颜色(透明)
(2)四个角都有弧度
(3)有阴影效果(鼠标放在这个盒子上面，出现阴影)
(4)居中显示，
那么好，知道了这些，开始写代码
//页面
//css部分
.head {
margin: 50px auto;/*高度50px,居中*/
width: 400px;/*盒子长*/
height: 350px;/*盒子宽*/
border: 1px solid #999999;/*颜色为灰色的1px宽度的实线边框(显示盒子)*/
background-color: #333333;/*盒子的背景颜色*/
opacity: 0.5;/*透明度0为完全透明，1是不透明，*/
border-radius: 10%;/*设置圆形(4个角的弧度)*/
}
/*hover 鼠标移动到div上时*/
div:hover {
-webkit-transition: border linear .2s, -webkit-box-shadow linear .5s;
/*鼠标移动是过渡*/
box-shadow: 0px 0px 100px #FFFFFF/*四边出现阴影，效果发光*/
}
//强制转换字体颜色
::-webkit-input-placeholder {
color: #fff;
}
:-moz-placeholder {
color: #fff;
}
::-moz-placeholder {
color: #fff;
}
:-ms-input-placeholder {
color: #fff;
}
然后呢！里面有3个输入框和一个按钮
//页面
//required必须填写的字段，placeholder 默认提示信息
登录
效果
上面的问题
(1)不是一个标签占一行
(2)主要问题不美观(贼难看)
(3)怎么让它变的美观一些呢，看下面代码
input {
width: 300px;
display: block;/*设置成块级元素，独占一行*/
margin: 30px auto;/*外边距30px，输入框居中*/
padding: 10px;/*设置内边距*/
text-align: center;/*文字居中*/
border: 1px solid #EBEBEB;/*把输入框包起来，变成长方形*/
border-radius: 10px;/*让长方形的4个小弯一点，*/
font-family: 'Source Sans Pro', sans-serif;/*字体类型*/
font-size: 18px;/*字体大小*/
//你点击输入框，会出现一个边框，下面代码是去掉原来边框
outline: none;
background-color: #5E5E5E;/*输入框的背景颜色*/
}
button {
width: 100px;/*设置按钮的长度*/
margin: 10px;/*外边距*/
padding: 10px;/*内边距*/
border-radius: 10px;/*设置圆形*/
text-align: center;/*文字居中*/
font-family: 'Source Sans Pro', sans-serif;/*字体类型*/
font-size: 18px;/*字体大小*/
float: right;/*向右浮动*/
border: 1px solid #269ABC;/*把输入框包起来，变成长方形*/
outline: none;/*和上面一样*/
color: #fff;/*字体的颜色*/
background-color: #269ABC;/*背景颜色*/
}
效果
下面还是写特效的代码
hover 鼠标移动到目标上触发
focus 鼠标点击，获取焦点时触发
input:focus {
border: 2px solid #269ABC;/*4边更换颜色*/
box-shadow: 0px 0px 10px #ADADAD;/*4边出现阴影*/
background-color: #333333;/*更换背景颜色，看出效果*/
}
button:hover{
border-left: 20px solid #E8E8E8 ;/*目标左侧变宽*/
border-right: 20px solid #E8E8E8 ;/*目标右侧变宽，*/
background-color: #5E5E5E;/*更换颜色*/
}
完毕
如果觉得《html阴影特效作品及代码 纯CSS做特效网页(阴影 透明 画圆圈等等)》对你有帮助，请点赞、收藏，并留下你的观点哦！
