CSS에서 단면 그림자 효과를 얻는 방법-CSS 지식-php.cn

CSS에서 단면 그림자 효과를 얻는 방법

藏色散人

풀어 주다： 2021-01-11 11:20:47

원래의

11985명이 탐색했습니다.

이 글에서는 HTML/css 단면 섀도우 의 구체적인 구현 방법을 주로 소개합니다.

HTML/CSS를 처음 시작하는 사람이라면 누구나 테두리 그림자 효과에 대해 어느 정도 이해하고 있어야 합니다. 단면 그림자 효과를 적절하게 사용하면 웹 페이지 콘텐츠를 더욱 풍부하고 아름답게 만들 수 있습니다. 자, 지난 글에서는 css3 테두리 그림자 효과 구현 방법도 소개해 드렸는데요.

추천 참고 자료: "CSS 튜토리얼"

이 섹션에서는 html/css 싱글톤을 소개합니다. 디테일하게 테두리 그림자 효과 구현!

html/css 단일 테두리 그림자를 구현하는 코드 예제 는 다음과 같습니다.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>HTML/css实现单边框阴影实例</title>
</head>
<style type="text/css">
 .box-shadow {
        width: 200px;
 height: 100px;
 border-radius: 5px;
 border: 1px solid #ccc;
 margin: 20px;
 }

    .top {
        box-shadow: 0 -2px 0 red;
 }

    .right {
        box-shadow: 2px 0 0 green;
 }

    .bottom {
        box-shadow: 0 2px 0 blue;
 }

    .left {
        box-shadow: -2px 0 0 orange;
 }
</style>
<body>
<div  class="box-shadow top"></div>
<div  class="box-shadow right"></div>
<div  class="box-shadow bottom"></div>
<div  class="box-shadow left"></div>

</body>
</html>

로그인 후 복사

프론트엔드 액세스 효과는 다음과 같습니다. # 🎜🎜#

1. 위쪽 테두리 그림자 :

CSS에서 단면 그림자 효과를 얻는 방법