常州专业做网站公司,合肥网站建设培训学校,营销型网站头部布局的元素,网站 横幅一、CSS3用户界面#xff1a;
在CSS3中#xff0c;增加了一些新的用户界面特性来调整元素尺寸、框尺寸和外边框。CSS3用户界面属性#xff1a;resize、box-sizing、outline-offset。
1、resize#xff1a;
resize属性指定一个元素是否应该由用户去调整大小。
style…一、CSS3用户界面
在CSS3中增加了一些新的用户界面特性来调整元素尺寸、框尺寸和外边框。CSS3用户界面属性resize、box-sizing、outline-offset。
1、resize
resize属性指定一个元素是否应该由用户去调整大小。
style
div
{
border:2px solid;
padding:10px 40px;
width:300px;
resize:both;
overflow:auto;
}
/style
2、box-sizing
box-sizing属性允许以确切的方式定义适应某个区域的具体内容。
style
#example1 { box-sizing: content-box; width: 300px; height: 100px; padding: 30px; border: 10px solid blue;
} #example2 { box-sizing: border-box; width: 300px; height: 100px; padding: 30px; border: 10px solid blue;
}
/style
3、outline-offset
outline-offset属性对轮廓进行偏移并在超出边框边缘的位置绘制轮廓。轮廓与边框有两点不同轮廓不占用空间轮廓可能是非矩形。
style
div
{
margin:20px;
width:150px;
padding:10px;
height:70px;
border:2px solid black;
outline:2px solid red;
outline-offset:15px;
}
/style
CSS3用户界面特性 二、CSS3图片
1、圆角图片
style
Img2 { border-radius: 8px;
}
Img1 { border-radius: 50%;
}
/style
2、缩略图
style
a { display: inline-block; border: 1px solid blue; border-radius: 4px; padding: 5px; transition: 0.3s;
} a:hover { box-shadow: 0 0 2px 1px rgba(0, 140, 186, 0.5);
}
/style
3、响应式图片
响应式图片会自动适配各种尺寸的屏幕。图片放大的尺寸不大于其原始的最大值。
style
img { max-width: 100%; height: auto;
}
/style 4、图片文本
style
.container { position: relative;
} .center { position: absolute; left: 0; top: 50%; width: 100%; text-align: center; font-size: 18px;
margin-top:-9px;
} img { width: 100%; height: auto; opacity: 0.3;
}
/style
5、卡片式图片
style
body {margin:25px;} div.polaroid { width: 80%; background-color: white; box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19); margin-bottom: 25px;
} div.container { text-align: center; padding: 10px 20px;
}
/style
6、图片滤镜
Css filter属性为元素添加可是效果如模糊、饱和度
style
img { width: 33%; height: auto; float: left; max-width: 235px;
} .blur {-webkit-filter: blur(4px);filter: blur(4px);}
.brightness {-webkit-filter: brightness(250%);filter: brightness(250%);}
.contrast {-webkit-filter: contrast(180%);filter: contrast(180%);}
.grayscale {-webkit-filter: grayscale(100%);filter: grayscale(100%);}
.huerotate {-webkit-filter: hue-rotate(180deg);filter: hue-rotate(180deg);}
.invert {-webkit-filter: invert(100%);filter: invert(100%);}
.opacity {-webkit-filter: opacity(50%);filter: opacity(50%);}
.saturate {-webkit-filter: saturate(7); filter: saturate(7);}
.sepia {-webkit-filter: sepia(100%);filter: sepia(100%);}
.shadow {-webkit-filter: drop-shadow(8px 8px 10px green);filter: drop-shadow(8px 8px 10px green);}
/style
7、响应式图片相册
style
div.img { border: 1px solid #ccc;
} div.img:hover { border: 1px solid #777;
} div.img img { width: 100%; height: auto;
} div.desc { padding: 15px; text-align: center;
} * { box-sizing: border-box;
} .responsive { padding: 0 6px; float: left; width: 24.99999%;
} media only screen and (max-width: 700px){ .responsive { width: 49.99999%; margin: 6px 0; }
} media only screen and (max-width: 500px){ .responsive { width: 100%; }
} .clearfix:after { content: ; display: table; clear: both;
}
/style
8、图片模态
style
#myImg { border-radius: 5px; cursor: pointer; transition: 0.3s;
} #myImg:hover {opacity: 0.7;} /* The Modal (background) */
.modal { display: none; /* Hidden by default */ position: fixed; /* Stay in place */ z-index: 1; /* Sit on top */ padding-top: 100px; /* Location of the box */ left: 0; top: 0; width: 100%; /* Full width */ height: 100%; /* Full height */ overflow: auto; /* Enable scroll if needed */ background-color: rgb(0,0,0); /* Fallback color */ background-color: rgba(0,0,0,0.9); /* Black w/ opacity */
} /* Modal Content (image) */
.modal-content { margin: auto; display: block; width: 80%; max-width: 700px;
} /* Caption of Modal Image */
#caption { margin: auto; display: block; width: 80%; max-width: 700px; text-align: center; color: #ccc; padding: 10px 0; height: 150px;
} /* Add Animation */
.modal-content, #caption { -webkit-animation-name: zoom; -webkit-animation-duration: 0.6s; animation-name: zoom; animation-duration: 0.6s;
} -webkit-keyframes zoom { from {-webkit-transform: scale(0)} to {-webkit-transform: scale(1)}
} keyframes zoom { from {transform: scale(0.1)} to {transform: scale(1)}
} /* The Close Button */
.close { position: absolute; top: 15px; right: 35px; color: #f1f1f1; font-size: 40px; font-weight: bold; transition: 0.3s;
} .close:hover,
.close:focus { color: #bbb; text-decoration: none; cursor: pointer;
} /* 100% Image Width on Smaller Screens */
media only screen and (max-width: 700px){ .modal-content { width: 100%; }
}
/style
三、CSS3按钮
1、按钮颜色
style
.button { background-color: #4CAF50; /* 绿色 */ border: none; color: white; padding: 15px 32px; text-align: center; text-decoration: none; display: inline-block; font-size: 16px; margin: 4px 2px; cursor: pointer;
} .button2 {background-color: #008CBA;} /* 蓝色 */
.button3 {background-color: #f44336;} /* 红色 */
.button4 {background-color: #e7e7e7; color: black;} /* 灰色 */
.button5 {background-color: #555555;} /* 黑色 */
/style
2、按钮大小
style
.button { background-color: #4CAF50; /* Green */ border: none; color: white; padding: 15px 32px; text-align: center; text-decoration: none; display: inline-block; font-size: 16px; margin: 4px 2px; cursor: pointer;
} .button1 {font-size: 10px;}
.button2 {font-size: 12px;}
.button3 {font-size: 16px;}
.button4 {font-size: 20px;}
.button5 {font-size: 24px;}
/style
3、圆角按钮
style
.button { background-color: #4CAF50; /* Green */ border: none; color: white; padding: 15px 32px; text-align: center; text-decoration: none; display: inline-block; font-size: 16px; margin: 4px 2px; cursor: pointer;
} .button1 {border-radius: 2px;}
.button2 {border-radius: 4px;}
.button3 {border-radius: 8px;}
.button4 {border-radius: 12px;}
.button5 {border-radius: 50%;}
/style
4、按钮边框颜色
style
.button { background-color: #4CAF50; /* Green */ border: none; color: white; padding: 15px 32px; text-align: center; text-decoration: none; display: inline-block; font-size: 16px; margin: 4px 2px; cursor: pointer;
} .button1 { background-color: white; color: black; border: 2px solid #4CAF50;
} .button2 { background-color: white; color: black; border: 2px solid #008CBA;
} .button3 { background-color: white; color: black; border: 2px solid #f44336;
} .button4 { background-color: white; color: black; border: 2px solid #e7e7e7;
} .button5 { background-color: white; color: black; border: 2px solid #555555;
}
/style
5、鼠标悬停按钮
style
.button { background-color: #4CAF50; /* Green */ border: none; color: white; padding: 16px 32px; text-align: center; text-decoration: none; display: inline-block; font-size: 16px; margin: 4px 2px; -webkit-transition-duration: 0.4s; /* Safari */ transition-duration: 0.4s; cursor: pointer;
} .button1 { background-color: white; color: black; border: 2px solid #4CAF50;
} .button1:hover { background-color: #4CAF50; color: white;
} .button2 { background-color: white; color: black; border: 2px solid #008CBA;
} .button2:hover { background-color: #008CBA; color: white;
} .button3 { background-color: white; color: black; border: 2px solid #f44336;
} .button3:hover { background-color: #f44336; color: white;
} .button4 { background-color: white; color: black; border: 2px solid #e7e7e7;
} .button4:hover {background-color: #e7e7e7;} .button5 { background-color: white; color: black; border: 2px solid #555555;
} .button5:hover { background-color: #555555; color: white;
}
/style
6、按钮阴影
style
.button { background-color: #4CAF50; /* Green */ border: none; color: white; padding: 15px 32px; text-align: center; text-decoration: none; display: inline-block; font-size: 16px; margin: 4px 2px; cursor: pointer; -webkit-transition-duration: 0.4s; /* Safari */ transition-duration: 0.4s;
} .button1 { box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2), 0 6px 20px 0 rgba(0,0,0,0.19);
} .button2:hover { box-shadow: 0 12px 16px 0 rgba(0,0,0,0.24),0 17px 50px 0 rgba(0,0,0,0.19);
}
/style
7、禁用按钮
style
.button { background-color: #4CAF50; /* Green */ border: none; color: white; padding: 15px 32px; text-align: center; text-decoration: none; display: inline-block; font-size: 16px; margin: 4px 2px; cursor: pointer;
} .disabled { opacity: 0.6; cursor: not-allowed;
}
/style
8、按钮宽度
style
.button { background-color: #4CAF50; /* Green */ border: none; color: white; padding: 15px 32px; text-align: center; text-decoration: none; display: inline-block; font-size: 16px; margin: 4px 2px; cursor: pointer;
} .button1 {width: 250px;}
.button2 {width: 50%;}
.button3 { padding-left: 0; padding-right: 0; width: 100%;
}
/style
9、按钮组
style
.button { background-color: #4CAF50; /* Green */ border: none; color: white; padding: 15px 32px; text-align: center; text-decoration: none; display: inline-block; font-size: 16px; cursor: pointer; float: left;
} .button:hover { background-color: #3e8e41;
}
/style
10、带边框按钮组
style
.button { background-color: #4CAF50; /* Green */ border: 1px solid green; color: white; padding: 15px 32px; text-align: center; text-decoration: none; display: inline-block; font-size: 16px; cursor: pointer; float: left;
} .button:hover { background-color: #3e8e41;
}
/style
11、按钮动画
style
.button { display: inline-block; border-radius: 4px; background-color: #f4511e; border: none; color: #FFFFFF; text-align: center; font-size: 28px; padding: 20px; width: 200px; transition: all 0.5s; cursor: pointer; margin: 5px;
} .button span { cursor: pointer; display: inline-block; position: relative; transition: 0.5s;
} .button span:after { content: »; position: absolute; opacity: 0; top: 0; right: -20px; transition: 0.5s;
} .button:hover span { padding-right: 25px;
} .button:hover span:after { opacity: 1; right: 0;
}
/style 波纹效果
style
.button { position: relative; background-color: #4CAF50; border: none; font-size: 28px; color: #FFFFFF; padding: 20px; width: 200px; text-align: center; -webkit-transition-duration: 0.4s; /* Safari */ transition-duration: 0.4s; text-decoration: none; overflow: hidden; cursor: pointer;
} .button:after { content: ; background: #90EE90; display: block; position: absolute; padding-top: 300%; padding-left: 350%; margin-left: -20px!important; margin-top: -120%; opacity: 0; transition: all 0.8s
} .button:active:after { padding: 0; margin: 0; opacity: 1; transition: 0s
}
/style
按压效果
style
.button { display: inline-block; padding: 15px 25px; font-size: 24px; cursor: pointer; text-align: center; text-decoration: none; outline: none; color: #fff; background-color: #4CAF50; border: none; border-radius: 15px; box-shadow: 0 9px #999;
} .button:hover {background-color: #3e8e41} .button:active { background-color: #3e8e41; box-shadow: 0 5px #666; transform: translateY(4px);
}
/style
