CSS 테두리 도움말

현재 CSS를 사용하지 않고 CSS3를 사용하여, 제기 된 유형 테두리 스타일을 지정하는 방법이 있습니까? 예를 들어 내 메뉴를 강조하고 싶습니다. 기본적으로 둥근 모서리가 아닌 테두리가 둥근 모서리가 아닌 후에.CSS 테두리 도움말

감사합니다.

출처

2010-07-25 tonyf

같은 것 ... 타원 어쩌면? 이 차트의 중앙 노드처럼? http://www.homeandlearn.co.uk/powerpoint/images/charts/7Slide6.gif – ZJR

CSS 2.1 이전에는 double, ridge, groove를 사용할 수 있습니다 삽입 또는 삽입. 나는 당신이 사용할 수있는 다양한 테두리 스타일을 가지고 놀고 테스트 할 수있는 간단한 데모 파일을 작성했습니다.

<!DOCTYPE HTML> 
<html> 
<head> 
    <meta http-equiv="Content-type" content="text/html; charset=utf-8"> 
    <title>Border Styles</title> 
    <style type="text/css" media="screen"> 
     body { background: #999; } 
     div { background: #eee; float: left; margin: 10px; padding: 10px; height: 100px; width: 100px; } 
     .double { border: 4px double #ccc; } 
     .ridge { border: 4px ridge #ccc; } 
     .groove { border: 4px groove #ccc; } 
     .inset { border: 4px inset #ccc; } 
     .outset { border: 4px outset #ccc; } 
    </style> 
</head> 
<body> 
    <div class="double">double</div> 
    <div class="ridge">ridge</div> 
    <div class="groove">groove</div> 
    <div class="inset">inset</div> 
    <div class="outset">outset</div> 
</body> 
</html>

CSS3 사양 border-radius 속성 없이는 둥근 모서리를 만들 수 없습니다. 이 작업을 수행하려면 Modernizr과 같은 스크립트를 사용하여 CSS3을 지원할 수없는 브라우저를 대체 지원해야합니다.

출처

2010-07-26 00:15:04

'inset'과'outset'은 그렇게 할 것이지만, 그것은 가장 예쁜 * 결과는 아닙니다. : P +1 간단한 방법으로. – jolt

이미지가 없습니다. 그리고 CSS3은 현재 CSS라고 할 수 있습니다. 최소한 WebKit과 그보다 작은 Gecko를 구현해야합니다.

IE도까지 천천히 진행 캐치를 재생 :

당신은 시도하고 당신이 바깥 경계에 도달 모든 테두리와 색상의 밝은 그늘과 몇 가지 하위 요소를 갖는하여 제기 경계를 만들 수 .

또한 너비가 음수 여서 CSS가 1 개인 노치가 생길 수 있습니다. 또한 border-radius없이 둥근 테두리를 만들 수 있다고 주장 할 수 있지만 HTML과 CSS는 매우 끔찍합니다 (음수 여백을 포함한 모든 하위 요소를 생각하십시오)

출처

2010-07-25 23:53:15 alex

IE9는 CSS2를 완전히 지원하는 것을 목표로합니다. 그들은 자신의 웹 사이트에서 자랑스러워했습니다 ... 웹 사이트에서 그들은 또한 경쟁자들이 이미 CSS3에서 작업하고 있다고 지적했습니다. * Facepalm * ... 'border-radius'를 사용할 수도 있지만 테이블을 사용할 수도 있습니다 ... 적어도 작업하기가 쉽기 때문에 ... – Warty

@ItzWarty는 테이블을 사용하여 이것을 달성하는 방법에 대한 작은 샘플을 제공 할 수 있습니다 - 감사합니다. – tonyf

예제 사진을 제공 할 수 있다면 예를 하나 만들 수 있습니다. – Warty

CSS 테두리 도움말

답변

관련 문제