4
왼쪽 위, 오른쪽 위는 진한 파란색, 왼쪽 아래는 진회색, 오른쪽 아래는 밝은 회색/밝은 테두리가 흰색으로 표시된 테두리를 추가하고 싶습니다. 파랑, 그라디언트?왼쪽, 위, 아래 및 오른쪽에서 색 그라디언트가있는 테두리
CSS로 가능합니까? 아니면 배경 이미지를 사용해야합니까?
왼쪽 위, 오른쪽 위는 진한 파란색, 왼쪽 아래는 진회색, 오른쪽 아래는 밝은 회색/밝은 테두리가 흰색으로 표시된 테두리를 추가하고 싶습니다. 파랑, 그라디언트?왼쪽, 위, 아래 및 오른쪽에서 색 그라디언트가있는 테두리
CSS로 가능합니까? 아니면 배경 이미지를 사용해야합니까?
:before
유사 요소와 linear-gradient
을 사용하면 테두리 효과를 만들 수 있습니다.
.element {
background: white;
position: relative;
width: 200px;
height: 150px;
margin: 50px;
}
.element:before {
content: '';
position: absolute;
left: -5px;
top: -5px;
width: calc(100% + 10px);
height: calc(100% + 10px);
background: linear-gradient(45deg, rgba(220, 218, 219, 1) 0%, rgba(255, 255, 255, 1) 42%, rgba(255, 255, 255, 1) 59%, rgba(125, 188, 220, 1) 100%);
z-index: -1;
}
<div class="element"></div>