> 웹 프론트엔드 > HTML 튜토리얼 > css 曲线阴影_html/css_WEB-ITnose

css 曲线阴影_html/css_WEB-ITnose

WBOY
풀어 주다: 2016-06-24 11:39:26
원래의
1045명이 탐색했습니다.

  • 先看一下我们要实现的效果图
  • 道理很简单,就是通过几个元素阴影叠加,生成我们看到的这种效果,主要是对阴影样式的运用,以及 before 和 after 元素的运用,直接上代码:

    html 代码:

    <!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>CSS3实现曲线阴影和翘边阴影</title>    <link rel="stylesheet" type="text/css" href="css/style.css"></head><body>    <div class="wrap effect">        <h1>shadow effect</h1>    </div></body></html>
    로그인 후 복사

    css 样式代码:

    /* **author:青天诀; */body,h1,ul,li{ margin: 0; padding: 0; }body{ font-family: Arial; font-size: 20px; }ul,li{ list-style: none; }.wrap{ width: 50%; height: 200px; background-color: #fff; margin: 50px auto; position: relative; }.wrap h1{ line-height: 200px; text-align: center; font-size: 20px; }.effect{ -webkit-box-shadow: 0px 1px 4px rgba(0,0,0,.3), 0px 0px 40px rgba(0,0,0,.1) inset; -moz-box-shadow: 0px 1px 4px rgba(0,0,0,.3), 0px 0px 40px rgba(0,0,0,.1) inset; -o-box-shadow: 0px 1px 4px rgba(0,0,0,.3), 0px 0px 40px rgba(0,0,0,.1) inset; -mz-box-shadow: 0px 1px 4px rgba(0,0,0,.3), 0px 0px 40px rgba(0,0,0,.1) inset; box-shadow: 0px 1px 4px rgba(0,0,0,.3), 0px 0px 40px rgba(0,0,0,.1) inset; }.effect:before, .effect:after{ content: ""; background-color: red; position: absolute; z-index: -1; left: 10px; right: 10px; top: 50%; bottom: 0px; -webkit-box-shadow: 0px 0px 20px rgba(0,0,0,.8); -moz-box-shadow: 0px 0px 20px rgba(0,0,0,.8); -o-box-shadow: 0px 0px 20px rgba(0,0,0,.8); -mz-box-shadow: 0px 0px 20px rgba(0,0,0,.8); box-shadow: 0px 0px 20px rgba(0,0,0,.8); border-radius: 50px; }
    로그인 후 복사

    版权声明:本文为博主原创文章,未经博主允许不得转载。

    관련 라벨:
    원천:php.cn
    본 웹사이트의 성명
    본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
    인기 튜토리얼
    더>
    최신 다운로드
    더>
    웹 효과
    웹사이트 소스 코드
    웹사이트 자료
    프론트엔드 템플릿