어떻게 난 단지 코너 테두리를 표시 할 수 있습니다?

해결법

1.내가 div의 중복 사용합니다.

내가 div의 중복 사용합니다.

사각형 모서리 하나. 그리고 둥근 모서리를 가진 기타 (그래서 첫 번째의 모서리를 숨기지 않습니다).
```
<div id="div1" />
<div id="div2" />


#div1 {
  position:absolute;
  top:9px;
  left:9px;
  height:100px;
  width:100px;
  background-color:white;
  border:1px solid black;
}

#div2 {
  position:relative;
  top:-1px;
  left:-1px;
  height:102px;
  width:102px;
  background-color:white;
  border-radius: 15px;
}
```
http://jsfiddle.net/y3EfP/

결과:

@ 웹 - 티 의해 제공되는 강화 된 솔루션 :

http://jsfiddle.net/webtiki/y3EfP/147/

2.
CONTENT 및 콘텐츠가 상기 적어도 하나 개의 HTML 노드를 포함한다고 가정.

CONTENT 및 콘텐츠가 상기 적어도 하나 개의 HTML 노드를 포함한다고 가정.

#content {position:relative}
#content:before, #content:after, #content>:first-child:before, #content>:first-child:after {
    position:absolute; content:' ';
    width:80px; height: 80px;
    border-color:red; /* or whatever colour */
    border-style:solid; /* or whatever style */
}
#content:before {top:0;left:0;border-width: 1px 0 0 1px}
#content:after {top:0;right:0;border-width: 1px 1px 0 0}
#content>:first-child:before {bottom:0;right:0;border-width: 0 1px 1px 0}
#content>:first-child:after {bottom:0;left:0;border-width: 0 0 1px 1px}

여기에 바이올린입니다

3.당신은 배경 이미지로 그 사용하여 다중 선형 그라디언트를 얻을 수 있습니다.

당신은 배경 이미지로 그 사용하여 다중 선형 그라디언트를 얻을 수 있습니다.

DIV { 폭 : 100 픽셀; 높이 : 100 픽셀; 배경: 선형 구배 (오른쪽, 블랙 4 픽셀 투명 4 픽셀) 0 0 선형 구배 (오른쪽, 블랙 4 픽셀 투명 4 픽셀) 0 ~ 100 % (왼쪽, 블랙 4 픽셀, 4 픽셀을 투명) 선형 구배 100 % 0, (왼쪽, 블랙 4 픽셀, 4 픽셀을 투명) 선형 구배 100 % 100 %, 0 0 (바닥, 블랙 4 픽셀, 4 픽셀을 투명) 선형 구배 선형 구배 (하단 블랙 4 픽셀, 4 픽셀 투명) 100 % 0, 선형 구배 (상단, 흑색 4 픽셀 투명 4 픽셀) 0 ~ 100 % 선형 구배 100 % 100 % (상, 블랙 4 픽셀, 4 픽셀을 투명); 배경 - 반복 : 아니오 - 반복; 배경 크기 : 20 픽셀 20 픽셀; }
4.당신은 지금 큰 응답을 허용하는 벡터를 사용하여 시작하려는 경우 다른 훌륭한 대안이다.

당신은 지금 큰 응답을 허용하는 벡터를 사용하여 시작하려는 경우 다른 훌륭한 대안이다.

SVG는 사용할 수있는 훌륭한 도구입니다. 이 경우 SVG를 사용하는 경우의 장점은 :

인라인 SVG에 대한 브라우저 지원 자세한 내용은 다시 인터넷 익스플로러 9를 참조 canIuse에 간다.
5.여기에 여분의 의사 / 실제 요소를 사용하지 않고이 효과를 만들 수있는 방법 중 몇 가지입니다. 주의 할 것은 그들이 CSS3 속성을 사용하기 때문에이 두 접근 방식은 최신 브라우저에서만 작동 할 것입니다.

여기에 여분의 의사 / 실제 요소를 사용하지 않고이 효과를 만들 수있는 방법 중 몇 가지입니다. 주의 할 것은 그들이 CSS3 속성을 사용하기 때문에이 두 접근 방식은 최신 브라우저에서만 작동 할 것입니다.

국경 이미지 사용 : 테두리 이미지 속성이 꽤 쉽게 같은 효과를 만들 수 있습니다. 다음과 같은 접근 방식은 다음과 같습니다

.bordered { 배경 색상 : 베이지 색; 국경 이미지 소스 : 홈페이지 ( "http://i.stack.imgur.com/s2CAw.png"); 보더 이미지 슬라이스 : 1; 보더 화상 폭 : 5px; } .square { 높이 : 150 픽셀; 폭 : 150 픽셀; } .large 평방 { 높이 : 350px; 폭 : 350px; } / * 그냥 데모 * / DIV { 마진 - 하단 : 10px; }

장점 :

단점 :

배경 이미지를 사용 : 배경 화상 특성은 또한 효과를 선형 구배 이미지로 사용될 수있다. 다음과 같은 접근 방식은 다음과 같습니다

.bordered.square { 높이 : 150 픽셀; 폭 : 150 픽셀; } .bordered.rectangle { 높이 : 150 픽셀; 폭 : 250 픽셀; } .bordered { 배경 색상 : 베이지 색; 배경 화상 (오른쪽 블랙 30 픽셀 투명 30 픽셀 행)의 선형 구배, 선형 구배 (오른쪽 블랙 30 픽셀 투명 30 픽셀까지), 선형 구배, 선형 구배 ((하단 블랙 30 픽셀 투명 30 픽셀까지) 하단 블랙 30 픽셀 투명 30 픽셀)로; 배경 사이즈 : 100 % 5px 100 % 5px, 5px 100 %, 100 % 5px; 배경 위치 : -15px 0 %, -15px 100 %, 0 % -15px 100 % -15px; 배경 반복 : 반복-X 반복-X, Y-반복 반복-Y; } / * 그냥 데모 * / DIV { 마진 - 하단 : 10px; }

장점 :

단점 :

6.당신은 절대적으로 위치 할 수 넷
의 해당 두 개의 테두리가 각 모서리에 하나, 각.

당신은 절대적으로 위치 할 수 넷

의 해당 두 개의 테두리가 각 모서리에 하나, 각.

HTML

<div class="corners">
  <div class="top left"></div>
  <div class="top right"></div>
  <div class="bottom right"></div>
  <div class="bottom left"></div>
  content goes here
</div>

CSS

.corners {
  position: relative;
  width: 100px; /* for demo purposes */
  padding: 10px;
}

.top, .bottom {
  position: absolute;
  width: 10px;
  height: 10px;
}

.top {
  top: 0;
  border-top: 1px solid;
}

.bottom {
  bottom: 0;
  border-bottom: 1px solid;
}

.left {
  left: 0;
  border-left: 1px solid;
}

.right {
  right: 0;
  border-right: 1px solid;
}

7.두 사업부를 사용하여 서로의 상단에 있습니다. 그리고 클립 경로를 추가하면 뒤에 당신이 효과처럼 테두리를 만들 수있는 div에 있습니다.

두 사업부를 사용하여 서로의 상단에 있습니다. 그리고 클립 경로를 추가하면 뒤에 당신이 효과처럼 테두리를 만들 수있는 div에 있습니다.

.wrapper { 표시 : 인라인 블록; 배경 색상 : 검정; 라인 높이 : 0 픽셀; -webkit 클립 경로 : 다각형 (0 % 100 % 30 % 100 % 30 % 70 % 70 % 70 % 70 % 100 % 100 % 100 % 100 % 70 % 70 % 70 % 70 % 30 % 100 % 30 % 100 % 0 % 70 % 0 % 70 % 30 % 30 % 30 % 30 % 0 % 0 % 0 % 0 % 30 % 30 % 30 % 30 % 70 % 0 % 70 %); 클립 경로 : 다각형 (0 % 100 %, 30 % 100 %, 30 % 70 % 70 % 70 % 70 % 100 %, 100 % 100 %, 100 % 70 % 70 % 70 % 70 % 30 % 100 % 30 % 100 % 0 %, 70 % 0 %, 70 % 30 % 30 % 30 % 30 % 0 %, 0 % 0 %, 0 % 30 % 30 % 30 % 30 % 70 % 0 % 70 %); } .wrapper {} .wrapper 사업부 { 표시 : 인라인 블록; 높이 : 150 픽셀; 폭 : 150 픽셀; 여백 : 10px; 배경 색상 : 흰색; }

두 개의 큰 의사 요소를 사용하면 당신은 테두리 효과를 만들 수 있습니다.

.CUT 국경을 { 위치 : 상대; 표시 : 인라인 블록; 경계 : 5px 검은 색; 폭 : 150 픽셀; 높이 : 150 픽셀; } .CUT 국경 :: 전에 { 내용 : ""; 위치 : 절대; 신장 CALC (100 % + 10px); 폭 : 50 %; 배경 색상 : 흰색; 맨 : -5px; 왼쪽 : 25 %; } .CUT 국경 :: 후 { 내용 : ""; 위치 : 절대; 신장 : 50 %; 폭 : 계산치 (100 % + 10px); 배경 색상 : 흰색; 상단 : 25 %; 왼쪽 : -5px; }

8.나는이 질문을 찾았지만, 나는 국경 반경 접근 방식에 만족하지 않은 : 나는 더 두꺼운 테두리를 사용하고 있었던 것처럼 내가 원한으로, 효과가 좋은대로하지 않았다. 나는 이미지를하지 않고, 다른 솔루션을 생성, 관리 및 여분의 마크 업없이 :

나는이 질문을 찾았지만, 나는 국경 반경 접근 방식에 만족하지 않은 : 나는 더 두꺼운 테두리를 사용하고 있었던 것처럼 내가 원한으로, 효과가 좋은대로하지 않았다. 나는 이미지를하지 않고, 다른 솔루션을 생성, 관리 및 여분의 마크 업없이 :

    .box {
        /* fake border */
        position: relative;
        overflow: hidden;
        box-shadow: inset 0px 0px 0px 10px green;
        padding: 1em;
    }

    .box:before {
        /* this element will hide the fake border on the top and bottom */
        content:'';         
        display: block;
        position: absolute;
        border-top:10px solid white;
        border-bottom:10px solid white;
        /* height = border-width x2 */
        height:calc(100% - 20px); 
        top:0;
        /* width = size of fake-border x2 */
        width: calc(100% - 36px);
        /* left = size of fake-border */
        left:18px;
    }

    .box:after {
        /* this element will hide the fake border on the left and right */
        /* the rules for width, heigth, top and left will be the opposite of the former element */
        display: block;
        position: absolute;
        content:'';
        border-right:10px solid white;
        border-left:10px solid white;
        height:calc(100% - 36px);
        width: calc(100% - 20px);
        top:18px;
        left: 0;
    }

다음은이 예와 JSFiddle가있다 : https://jsfiddle.net/t6dbmq3e/ 희망이 도움이.

9.여기에 최근 내용으로 한 수직 및 수평으로 모두를 중심으로 뭔가입니다.

여기에 최근 내용으로 한 수직 및 수평으로 모두를 중심으로 뭔가입니다.

html로

<div class="column">
  <div class="c-frame-wrapper">
    <div class="c-frame-tl"></div>
    <div class="c-frame-tr"></div>
    <div class="c-frame-br"></div>
    <div class="c-frame-bl"></div>
    <div class="c-frame-content">
        &copy; Copyright 2015 - Company name<br /><br />
        St Winifrids St,<br />
        The Saints, Harrogate HG1 5PZ, UK<br />
    </div>
  </div>
</div>

CSS는

.c-frame-wrapper {
  width: 250px;
  height: 100px;
  font-size:11px;
  color: $dark-grey-lighten-70;
  /* center align x axis */
  right: auto;
  left: 50%;
  transform: translateX(-50%);
}

.c-frame-tl {
  top: 0;
  left: 0;
  position: absolute;
  width:10px;
  height:10px;
  border-width: 3px;
  border-style: solid none none solid;
  border-color: #eb0000;
}

.c-frame-tr {
  top: 0;
  right: 0;
  position: absolute;
  width:10px;
  height:10px;
  border-width: 3px;
  border-style: solid solid none none;
  border-color: #eb0000;
}

.c-frame-br {
  bottom: 0;
  right: 0;
  position: absolute;
  width:10px;
  height:10px;
  border-width: 3px;
  border-style: none solid solid none;
  border-color: #eb0000;
}

.c-frame-bl {
  bottom: 0;
  left: 0;
  position: absolute;
  width:10px;
  height:10px;
  border-width: 3px;
  border-style: none none solid solid;
  border-color: #eb0000;
}

.c-frame-content {
  width:100%;
  text-align: center;
  /*center alignment x and y*/
  position: absolute;
  top: 50%;
  left: 50%;
  bottom: auto;
  right: auto;
  transform: translate(-50%,-50%); 
}

JSFiddle

10.내가 가장 좋은 방법은 의사 요소 방법이라고 생각합니다. 니스와 깨끗하고 수행은 (너무 많은) 추가 요소와 HTML을 오염시키지.

내가 가장 좋은 방법은 의사 요소 방법이라고 생각합니다. 니스와 깨끗하고 수행은 (너무 많은) 추가 요소와 HTML을 오염시키지.

나는 사본 및 솔루션 붙여 넣기를 들어, 위의 코드를 사용하여이 말대꾸 믹스 인을 만들었습니다 :

@mixin corner-borders($corner-width: 1px, $corner-size: 5px, $color-border: grey, $color-background: white) {
    position: relative;
    border: $corner-width solid $color-border;
    background-color: $color-background;

    &::before {
        content: "";
        z-index: 0;
        position: absolute;
        top: -$corner-width;
        bottom: -$corner-width;
        left: $corner-size;
        right: $corner-size;
        background-color: $color-background;
    }

    &::after {
        content: "";
        z-index: 0;
        position: absolute;
        top: $corner-size;
        bottom: $corner-size;
        left: -$corner-width;
        right: -$corner-width;
        background-color: $color-background;
    }
}

그럼 당신은 다음과 같이 사용할 수 있습니다 :

<div class="border">
    <div class="content">
        Content
    </div>
</div>

.border {
    @include corner-borders;
}

.content {
    position: relative;
    z-index: 1;
}

내용이 의사 요소 위에 앉아있다, 그래서 당신은 거기에서 Z- 인덱스 및 상대 위치를해야합니다.

나는 codepen 여기 데모 제작 : http://codepen.io/timrross/pen/XMwVbV

11.여기 쉽게 국경의 모양을 제어 할 수 있습니다 그라데이션 및 CSS 변수를 사용하여 아이디어입니다 :

여기 쉽게 국경의 모양을 제어 할 수 있습니다 그라데이션 및 CSS 변수를 사용하여 아이디어입니다 :

.box { --b : 5px; / * 테두리의 두께 * / --C : 빨간색; / * 테두리의 색상 * / --w : 20 픽셀; / * * 경계의 폭 / 국경 : VAR (- b)는 고체 투명; / * 경계를위한 공간 * / 배경: 선형 구배 (VAR (- c), VAR은 (- c)) 위쪽, 왼쪽 선형 구배 (VAR (- c), VAR은 (- c)) 위쪽, 왼쪽 선형 구배 (VAR (- c), VAR (- c)) 좌측 하단, 선형 구배 (VAR (- c), VAR (- c)) 좌측 하단, 선형 구배 (VAR (- c), VAR (- c))의 상위 오른쪽 선형 구배 (VAR (- c), VAR (- c))의 상위 오른쪽 선형 구배 (VAR (- c), VAR (- c)) 오른쪽 하단 선형 구배 (VAR (- c), VAR (- c)) 오른쪽 하단; 배경 사이즈 : VAR (- b) VAR (- w), VAR (- w) VAR (- b); 배경 - 원산지 : 경계 상자; 배경 - 반복 : 아니오 - 반복; / * 관련이없는 코드 * / 폭 : 200 픽셀; 높이 : 100 픽셀; 상자 크기 조정 : 국경 상자; 여백 : 5px; 표시 : 인라인 - 플렉스; 폰트 크기 : 30 픽셀; 정당화 - 내용 : 센터; 정렬-항목 : 센터; 라인 높이 : 90 픽셀; }
일부 콘텐츠
일부 콘텐츠
일부 콘텐츠
일부 콘텐츠
일부 콘텐츠
일부 콘텐츠

당신이 마스크이 결합하는 경우에도 복잡한 착색을 할 수 있습니다 :

.box { --b : 5px; / * 테두리의 두께 * / --C : 빨간색; / * 테두리의 색상 * / --w : 20 픽셀; / * * 경계의 폭 / 패딩 : VAR (- B) / * 경계를위한 공간 * / 위치 : 상대; / * 관련이없는 코드 * / 폭 : 200 픽셀; 높이 : 100 픽셀; 상자 크기 조정 : 국경 상자; 여백 : 5px; 표시 : 인라인 - 플렉스; 폰트 크기 : 30 픽셀; 정당화 - 내용 : 센터; 정렬-항목 : 센터; 라인 높이 : 90 픽셀; } .box :: 전에 { 함유량:""; 위치 : 절대; 최고 : 0; 왼쪽 : 0; 오른쪽 : 0; 바닥 : 0; 배경 : VAR (- C, 빨간색) -webkit-마스크 : 선형 구배 (# FFF # FFF) 위쪽, 왼쪽 선형 구배 (# FFF # FFF) 위쪽, 왼쪽 선형 구배 (# FFF # FFF) 왼쪽 아래, 선형 구배 (# FFF # FFF) 왼쪽 아래, 선형 구배 (# FFF # FFF) 위쪽에 바로 선형 구배 (# FFF # FFF) 위쪽에 바로 선형 구배 (# FFF # FFF) 오른쪽 하단 선형 구배 (# FFF # FFF) 오른쪽 하단; -webkit 마스크 크기 : VAR (- b) VAR (- w), VAR (- w) VAR (- b); -webkit-마스크 - 반복 : 아니오 - 반복; 마스크: 선형 구배 (# FFF # FFF) 위쪽, 왼쪽 선형 구배 (# FFF # FFF) 위쪽, 왼쪽 선형 구배 (# FFF # FFF) 왼쪽 아래, 선형 구배 (# FFF # FFF) 왼쪽 아래, 선형 구배 (# FFF # FFF) 위쪽에 바로 선형 구배 (# FFF # FFF) 위쪽에 바로 선형 구배 (# FFF # FFF) 오른쪽 하단 선형 구배 (# FFF # FFF) 오른쪽 하단; 마스크 크기 : VAR (- b) VAR (- w), VAR (- w) VAR (- B)를; 마스크하지-반복 : 더 반복을; }
일부 콘텐츠
일부 콘텐츠
일부 콘텐츠
일부 콘텐츠
일부 콘텐츠
일부 콘텐츠
12.내가 CSS에 빨아으로 좋아 나는 그것을 나 자신을 할 수 없을 거라 생각하지만 난 그렇게하고 작업을 것 같다 :

내가 CSS에 빨아으로 좋아 나는 그것을 나 자신을 할 수 없을 거라 생각하지만 난 그렇게하고 작업을 것 같다 :
```
<div id="half" style="position:absolute; top:0; left:0; width:30px; height:30px; overflow:visible; border-top:3px solid #F00; border-left:3px solid #06F;"></div>

<div id="half" style="position:absolute; bottom:0; right:0; width:30px; height:30px; overflow:visible; border-bottom:3px solid #F00; border-right:3px solid #06F;"></div>
```
그리고 그것은 작동하는 ;-) 당신의 도움에 대한 방해 감사 죄송 보인다.
13.이 단지 모서리에게 경계를 제공 할 깨끗한 CSS의 방법은 없습니다,하지만 당신은 모방 효과에 시도 할 수 있습니다. 이 아마도 같은 뭔가 : http://jsfiddle.net/RLG4z/

이 단지 모서리에게 경계를 제공 할 깨끗한 CSS의 방법은 없습니다,하지만 당신은 모방 효과에 시도 할 수 있습니다. 이 아마도 같은 뭔가 : http://jsfiddle.net/RLG4z/
```
<div id="corners">
  <div id="content">
    content
  </div>
</div>

#corners {
    width: 200px;
    height: 50px;
    border-radius: 10px;
    background-color: red;
    margin: 10px;
}
#content {
  background-color: white;
  border-radius: 15px;
  height: 30px;
  padding: 10px;
}
```
때문에 경계 반경의 차이, 기본 DIV 쇼 배경색 코너에 경계의 영향을주는 통.

개인적으로 나는 내가 결과의 더 나은 제어,이를 달성하기 위해 배경 이미지와 함께 작동 할 것이라는 점을 생각한다.

14.이것은 당신의 사진입니다 :

이것은 당신의 사진입니다 :

HTML :

<div class="shell">

    <div class="top">

        <div class="clear">
            <div class="left">
              &#42;&#42;&#42;&#42;
            </div>
            <div class="right">
              &#42;&#42;&#42;&#42;
            </div>
        </div>

        <div class="clear"> 
            <div class="left">
              &#42;
            </div>
            <div class="right">
              &#42;
            </div>
        </div>

        <div class="clear">
            <div class="left">
              &#42;
            </div>
            <div class="right">
              &#42;
            </div>
        </div>

    </div>

    <div class="content">
        <p>CONTENT</p>
    </div>

    <div class="bottom">

        <div class="clear"> 
            <div class="left">
              &#42;
            </div>
            <div class="right">
              &#42;
            </div>
        </div>

        <div class="clear">
            <div class="left">
              &#42;
            </div>
            <div class="right">
              &#42;
            </div>
        </div>

      <div class="clear">
            <div class="left">
              &#42;&#42;&#42;&#42;
            </div>
            <div class="right">
              &#42;&#42;&#42;&#42;
            </div>
        </div>
    </div>

및 CSS :

.shell { width: 200px;}
.left{ float:left; }
.right{float:right; }
.clear { clear: both; line-height: 10px; }
.content { line-height: 10px; text-align: center; }

15.우리가 호버 효과에 추가 할 수 있도록 여기에 상기 대답의 수정 된 버전이고,이 버전의 상대적인 위치 지정된 부모와 아이의 절대 위치를 갖는다.

우리가 호버 효과에 추가 할 수 있도록 여기에 상기 대답의 수정 된 버전이고,이 버전의 상대적인 위치 지정된 부모와 아이의 절대 위치를 갖는다.

http://jsfiddle.net/3jo5btxd/

HTML:
<div id="div1"><div id="div2"><img src="http://placekitten.com/g/82/82"></div></div>

CSS:

#div1 {
    position: relative;
    height: 100px;
    width: 100px;
    background-color: white;
    border: 1px solid transparent;
}

#div2 {
    position: absolute;
    top: -2px;
    left: -2px;
    height: 84px;
    width: 84px;
    background-color: #FFF;
    border-radius: 15px;
    padding: 10px;
}

#div1:hover {
    border: 1px solid red;
}

16.나는 @Tims이 접근 좋아,하지만 나는 그것을 배경 이미지 개체에 초점을 넣어 때문에, 내가 원하는하지 않은 상자에 배경 색상을 설정하라고 강요했다. 내 경우에는 내가에만 가능 그것은 조금 다른 구조 할 수있는, 또한 2 가장자리를 필요로했다.

나는 @Tims이 접근 좋아,하지만 나는 그것을 배경 이미지 개체에 초점을 넣어 때문에, 내가 원하는하지 않은 상자에 배경 색상을 설정하라고 강요했다. 내 경우에는 내가에만 가능 그것은 조금 다른 구조 할 수있는, 또한 2 가장자리를 필요로했다.

그래서 저는 그것을 좀 더 유연하게하고 여전히 모든 브라우저에서 작동 조금 다른을 구성.

이 솔루션은 네 모서리를 필요로하는 경우 작동하지만 단지 미래 수색자 여기를 떠나고 싶어하지 않습니다.

: 루트 { --border 폭 : 5px; --corner 크기 : 20 픽셀; --border 색 : 빨강; } .box-코너 { 위치 : 상대; } .box-코너 :: 전에, .box-코너 :: 후 { 내용 : ""; 위치 : 절대; 폭 : VAR (- 코너 크기); 높이 : VAR (- 코너 크기); 국경 : VAR (- 국경 폭) 우수 VAR (- 경계 색); } .box-코너 :: 전에 { 왼쪽 : 0; 최고 : 0; 국경없는 바닥 : 없음; 국경없는 오른쪽 : 없음; } .box-코너 :: 후 { 바닥 : 0; 오른쪽 : 0; 테두리 왼쪽 : 없음; 국경 정상 : 없음; } / * ############## THIS IS JUST OPTIONAL FOR 호버 EFFECT ############# * / .box-코너 { 전환 : 배경 색상은 쉽게 기능을 아웃 0.3S; } .box-코너 : 가져가 { 배경 : RGBA (0, 0, 0, 0.5) 중요한;! } .box-코너 :: 전에, .box-코너 :: 후 { 상자 크기 조정 : 국경 상자; 전환 : 0.3S 폭이 완화 된 아웃 높이 0.3S 용이성에서 아웃; } .box-코너 : 호버 :: 전, .box-코너 : 호버 :: 후 { 폭 : 100 %; 신장 : 100 %; }

호버 효과

당신은 가장자리 작업을 할 수있는 CSS 코드의 첫 번째 부분이 필요합니다. 당신이 그것을 필요하지 않은 경우 두 번째 부분은 쉽게 당신은 또한 단지 제거 할 수 있다는 멋진 호버 효과를 추가 할 수 있습니다.

CSS 변수 및 말대꾸하지 않고

당신은 CSS 변수를 사용하지 않으려면, 당신은 단지 하드 코딩 값으로 변수를 대체 할 수 있습니다. 당신이 그것을 밖으로 말대꾸 믹스 인을 확인하려면, 단지 @mixin 호출에 포장하고는 말대꾸 변수를 바르 대체합니다.

from https://stackoverflow.com/questions/14387690/how-can-i-show-only-corner-borders by cc-by-sa and MIT license

'JQUERY' 카테고리의 다른 글

[JQUERY] 어떻게 jQuery를 사용하여 요소의 ID를 얻을 수 있나요? (0)	2020.10.03
[JQUERY] 있는 jqGrid 페이징 질문 (0)	2020.10.03
[JQUERY] 크롬에서 옵션을 선택 요소에 이벤트를 클릭 (0)	2020.10.03
[JQUERY] 정렬 배열 요소 (숫자 문자열), 자연 종류 (0)	2020.10.03
[JQUERY] Access 개체 도트 표기법 문자열을 사용하여 자식 속성 [중복] (0)	2020.10.03

복붙노트

[JQUERY] 어떻게 난 단지 코너 테두리를 표시 할 수 있습니다?

어떻게 난 단지 코너 테두리를 표시 할 수 있습니다?

해결법

1.내가 div의 중복 사용합니다.

2.
CONTENT 및 콘텐츠가 상기 적어도 하나 개의 HTML 노드를 포함한다고 가정.

3.당신은 배경 이미지로 그 사용하여 다중 선형 그라디언트를 얻을 수 있습니다.

4.당신은 지금 큰 응답을 허용하는 벡터를 사용하여 시작하려는 경우 다른 훌륭한 대안이다.

5.여기에 여분의 의사 / 실제 요소를 사용하지 않고이 효과를 만들 수있는 방법 중 몇 가지입니다. 주의 할 것은 그들이 CSS3 속성을 사용하기 때문에이 두 접근 방식은 최신 브라우저에서만 작동 할 것입니다.

6.당신은 절대적으로 위치 할 수 넷
의 해당 두 개의 테두리가 각 모서리에 하나, 각.

7.두 사업부를 사용하여 서로의 상단에 있습니다. 그리고 클립 경로를 추가하면 뒤에 당신이 효과처럼 테두리를 만들 수있는 div에 있습니다.

9.여기에 최근 내용으로 한 수직 및 수평으로 모두를 중심으로 뭔가입니다.

10.내가 가장 좋은 방법은 의사 요소 방법이라고 생각합니다. 니스와 깨끗하고 수행은 (너무 많은) 추가 요소와 HTML을 오염시키지.

11.여기 쉽게 국경의 모양을 제어 할 수 있습니다 그라데이션 및 CSS 변수를 사용하여 아이디어입니다 :

12.내가 CSS에 빨아으로 좋아 나는 그것을 나 자신을 할 수 없을 거라 생각하지만 난 그렇게하고 작업을 것 같다 :

13.이 단지 모서리에게 경계를 제공 할 깨끗한 CSS의 방법은 없습니다,하지만 당신은 모방 효과에 시도 할 수 있습니다. 이 아마도 같은 뭔가 : http://jsfiddle.net/RLG4z/

14.이것은 당신의 사진입니다 :

15.우리가 호버 효과에 추가 할 수 있도록 여기에 상기 대답의 수정 된 버전이고,이 버전의 상대적인 위치 지정된 부모와 아이의 절대 위치를 갖는다.

'JQUERY' 카테고리의 다른 글

티스토리툴바

어떻게 난 단지 코너 테두리를 표시 할 수 있습니다?

해결법

1.내가 div의 중복 사용합니다.

2. CONTENT 및 콘텐츠가 상기 적어도 하나 개의 HTML 노드를 포함한다고 가정.

3.당신은 배경 이미지로 그 사용하여 다중 선형 그라디언트를 얻을 수 있습니다.

4.당신은 지금 큰 응답을 허용하는 벡터를 사용하여 시작하려는 경우 다른 훌륭한 대안이다.

5.여기에 여분의 의사 / 실제 요소를 사용하지 않고이 효과를 만들 수있는 방법 중 몇 가지입니다. 주의 할 것은 그들이 CSS3 속성을 사용하기 때문에이 두 접근 방식은 최신 브라우저에서만 작동 할 것입니다.

6.당신은 절대적으로 위치 할 수 넷 의 해당 두 개의 테두리가 각 모서리에 하나, 각.

7.두 사업부를 사용하여 서로의 상단에 있습니다. 그리고 클립 경로를 추가하면 뒤에 당신이 효과처럼 테두리를 만들 수있는 div에 있습니다.

9.여기에 최근 내용으로 한 수직 및 수평으로 모두를 중심으로 뭔가입니다.

10.내가 가장 좋은 방법은 의사 요소 방법이라고 생각합니다. 니스와 깨끗하고 수행은 (너무 많은) 추가 요소와 HTML을 오염시키지.

11.여기 쉽게 국경의 모양을 제어 할 수 있습니다 그라데이션 및 CSS 변수를 사용하여 아이디어입니다 :

12.내가 CSS에 빨아으로 좋아 나는 그것을 나 자신을 할 수 없을 거라 생각하지만 난 그렇게하고 작업을 것 같다 :

13.이 단지 모서리에게 경계를 제공 할 깨끗한 CSS의 방법은 없습니다,하지만 당신은 모방 효과에 시도 할 수 있습니다. 이 아마도 같은 뭔가 : http://jsfiddle.net/RLG4z/

14.이것은 당신의 사진입니다 :

15.우리가 호버 효과에 추가 할 수 있도록 여기에 상기 대답의 수정 된 버전이고,이 버전의 상대적인 위치 지정된 부모와 아이의 절대 위치를 갖는다.

'JQUERY' 카테고리의 다른 글

티스토리툴바

2.
CONTENT 및 콘텐츠가 상기 적어도 하나 개의 HTML 노드를 포함한다고 가정.

6.당신은 절대적으로 위치 할 수 넷
의 해당 두 개의 테두리가 각 모서리에 하나, 각.