本文小编为大家详细介绍“CSS常用的前端效果有哪些”,内容详细,步骤清晰,细节处理妥当,希望这篇“CSS常用的前端效果有哪些”文章能帮助大家解决疑惑,下面跟着小编的思路慢慢深入,一起来学习新知识吧。1、禁止选择文本body {-webkit-touch-callout: none;-webkit-user-select: none;-khtml-user-select: none;-moz-user-select: none;-ms-user-select: none;user-select: none;}2、在可打印的网页中显示URLs@media print {a:after {content: ” [” attr(href) “] “;}}3、深灰色的点击渐变按钮.graybtn {-moz-box-shadow:inset 0px 1px 0px 0px #ffffff;-webkit-box-shadow:inset 0px 1px 0px 0px #ffffff;box-shadow:inset 0px 1px 0px 0px #ffffff;background:-webkit-gradient( linear, left top, left bottombottom, color-stop(0.05, #ffffff), color-stop(1, #d1d1d1) );background:-moz-linear-gradient( center top, #ffffff 5%, #d1d1d1 100% );filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=’#ffffff’, endColorstr=’#d1d1d1′);background-color:#ffffff;-moz-border-radius:6px;-webkit-border-radius:6px;border-radius:6px;border:1px solid #dcdcdc;display:inline-block;color:#777777;font-family:arial;font-size:15px;font-weight:bold;padding:6px 24px;text-decoration:none;text-shadow:1px 1px 0px #ffffff;}.graybtn:hover {background:-webkit-gradient( linear, left top, left bottombottom, color-stop(0.05, #d1d1d1), color-stop(1, #ffffff) );background:-moz-linear-gradient( center top, #d1d1d1 5%, #ffffff 100% );filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=’#d1d1d1′, endColorstr=’#ffffff’);background-color:#d1d1d1;}.graybtn:active {position:relative;top:1px;}4、网页顶部盒阴影body:before {content: “”;position: fixed;top: -10px;left: 0;width: 100%;height: 10px;-webkit-box-shadow: 0px 0px 10px rgba(0,0,0,.8);-moz-box-shadow: 0px 0px 10px rgba(0,0,0,.8);box-shadow: 0px 0px 10px rgba(0,0,0,.8);z-index: 100;}5、在可点击的项目上强制手型a[href], input[type=’submit’], input[type=’image’], label[for], select, button, .pointer {cursor: pointer;}6、CSS3 鲜艳的输入(边框渐变)input[type=text], textarea {-webkit-transition: all 0.30s ease-in-out;-moz-transition: all 0.30s ease-in-out;-ms-transition: all 0.30s ease-in-out;-o-transition: all 0.30s ease-in-out;outline: none;padding: 3px 0px 3px 3px;margin: 5px 1px 3px 0px;border: 1px solid #ddd;}input[type=text]:focus, textarea:focus {box-shadow: 0 0 5px rgba(81, 203, 238, 1);padding: 3px 0px 3px 3px;margin: 5px 1px 3px 0px;border: 1px solid rgba(81, 203, 238, 1);}7、三角形列表项目符号ul {margin: 0.75em 0;padding: 0 1em;list-style: none;}li:before {content: “”;border-color: transparent #111;border-style: solid;border-width: 0.35em 0 0.35em 0.45em;display: block;height: 0;width: 0;left: -1em;top: 0.9em;position: relative;}8、内部CSS3 盒阴影#mydiv {-moz-box-shadow: inset 2px 0 4px #000;-webkit-box-shadow: inset 2px 0 4px #000;box-shadow: inset 2px 0 4px #000;}9、外部CSS3 盒阴影#mydiv {-webkit-box-shadow: 0 2px 2px -2px rgba(0, 0, 0, 0.52);-moz-box-shadow: 0 2px 2px -2px rgba(0, 0, 0, 0.52);box-shadow: 0 2px 2px -2px rgba(0, 0, 0, 0.52);}10、@font-face模板@font-face {font-family: ‘MyWebFont’;src: url(‘webfont.eot’); /* IE9 Compat Modes */src: url(‘webfont.eot?#iefix’) format(’embedded-opentype’), /* IE6-IE8 */url(‘webfont.woff’) format(‘woff’), /* Modern Browsers */url(‘webfont.ttf’) format(‘truetype’), /* Safari, Android, iOS */url(‘webfont.svg#svgFontName’) format(‘svg’); /* Legacy iOS */}body {font-family: ‘MyWebFont’, Arial, sans-serif;}11、CSS3渐变模板#colorbox {background: #629721;background-image: -webkit-gradient(linear, left top, left bottombottom, from(#83b842), to(#629721));background-image: -webkit-linear-gradient(top, #83b842, #629721);background-image: -moz-linear-gradient(top, #83b842, #629721);background-image: -ms-linear-gradient(top, #83b842, #629721);background-image: -o-linear-gradient(top, #83b842, #629721);background-image: linear-gradient(top, #83b842, #629721);}12、CSS3:全屏背景html {background: url(‘images/bg.jpg’) no-repeat center center fixed;-webkit-background-size: cover;-moz-background-size: cover;-o-background-size: cover;background-size: cover;}13、锚链接伪类a:link { color: blue; }a:visited { color: purple; }a:hover { color: red; }a:active { color: yellow; }14、图片边框偏光img.polaroid {background:#000; /*Change this to a background image or remove*/border:solid #fff;border-width:6px 6px 20px 6px;box-shadow:1px 1px 5px #333; /* Standard blur at 5px. Increase for more depth */-webkit-box-shadow:1px 1px 5px #333;-moz-box-shadow:1px 1px 5px #333;height:200px; /*Set to height of your image or desired div*/width:200px; /*Set to width of your image or desired div*/}15、通用媒体查询/* Smartphones (portrait and landscape) ———– */@media only screenand (min-device-width : 320px) and (max-device-width : 480px) {/* Styles */}/* Smartphones (landscape) ———– */@media only screen and (min-width : 321px) {/* Styles */}/* Smartphones (portrait) ———– */@media only screen and (max-width : 320px) {/* Styles */}/* iPads (portrait and landscape) ———– */@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) {/* Styles */}/* iPads (landscape) ———– */@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : landscape) {/* Styles */}/* iPads (portrait) ———– */@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : portrait) {/* Styles */}/* Desktops and laptops ———– */@media only screen and (min-width : 1224px) {/* Styles */}/* Large screens ———– */@media only screen and (min-width : 1824px) {/* Styles */}/* iPhone 4 ———– */@media only screen and (-webkit-min-device-pixel-ratio:1.5), only screen and (min-device-pixel-ratio:1.5) {/* Styles */}16、跨浏览器透明.transparent {filter: alpha(opacity=50); /* internet explorer */-khtml-opacity: 0.5; /* khtml, old safari */-moz-opacity: 0.5; /* mozilla, netscape */opacity: 0.5; /* fx, safari, opera */}17、用CSS动画实现省略号动画.loading:after {overflow: hidden;display: inline-block;vertical-align: bottombottom;animation: ellipsis 2s infinite;content: “6”; /* ascii code for the ellipsis character */}@keyframes ellipsis {from {width: 2px;}to {width: 15px;}}18、制造模糊文本.blurry-text {color: transparent;text-shadow: 0 0 5px rgba(0,0,0,0.5);}19、包裹长文本 文本过长自动换行不会穿破盒子pre {whitewhite-space: pre-line;word-wrap: break-word;}20、背景渐变色button {background-image: linear-gradient(#5187c4, #1c2f45);background-size: auto 200%;background-position: 0 100%;transition: background-position 0.5s;}button:hover {background-position: 0 0;}21、内容可编辑(contentedi免费云主机域名table=”true”)22、输入框改变placeholder字体颜色::-webkit-input-placeholder {color: red;}:-moz-placeholder {color: red;}::-moz-placeholder{color: red;}:-ms-input-placeholder {color: red;}读到这里,这篇“CSS常用的前端效果有哪些”文章已经介绍完毕,想要掌握这篇文章的知识点还需要大家自己动手实践使用过才能领会,如果想了解更多相关内容的文章,欢迎关注百云主机行业资讯频道。
本篇内容介绍了“HTML中px、em、pt长度单位的含义是什么”的有关知识,在实际案例的操作过程中,不少人都会遇到这样的困境,接下来就让小编带领大家学习一下如何处理这些情况吧!希望大家仔细阅读,能够学有所成! pt单位名称为点(Point),绝对长度单位一般老…
免责声明:本站发布的图片视频文字,以转载和分享为主,文章观点不代表本站立场,本站不承担相关法律责任;如果涉及侵权请联系邮箱:360163164@qq.com举报,并提供相关证据,经查实将立刻删除涉嫌侵权内容。