HTML5 실습 - CSS3의 여러 속성 text-shadow, box-shadow 및 border-radius에 대한 자세한 소개-H5 튜토리얼-php.cn

집

웹 프론트엔드

H5 튜토리얼

HTML5 실습 - CSS3의 여러 속성 text-shadow, box-shadow 및 border-radius에 대한 자세한 소개

黄舟

Mar 23, 2017 pm 04:08 PM

오늘 우리 콘텐츠는 CSS3의 text-shadow, box-shadow 및 border-radius 속성을 소개합니다. 이 속성은 페이지 레이아웃을 향상시킬 수 있으며 배울 가치가 있습니다.

RGBA

처음 세 값은 각각 RBG 값을 코딩하고 마지막 값은 투명도를 나타냅니다(0은 투명, 1은 불투명).

RGBA는 글꼴 색상, 테두리 색상, 배경색, 그림자 색상 등과 같은 모든 색상 관련 속성에 사용할 수 있습니다.

텍스트 그림자

텍스트 그림자의 구조는 x-오프셋, y-오프셋, 흐림, 흐림의 순서입니다. 색상 .

x-offset에 음수 값을 설정하면 그림자 위치가 왼쪽으로 변경되고, y-offset에 음수 값을 설정하면 그림자 위치가 머리로 변경됩니다. RBGA를 사용하여 그림자의 색상을 설정할 수도 있습니다.

쉼표로 구분된 텍스트 그림자 그룹을 설정할 수 있습니다. 아래 예에서는 두 개의 텍스트 그림자(상단 1px 및 하단 1px)를 사용하여 이름에 대한 뉴스 텍스트 효과를 설정합니다.

text-shadow: 0 1px 0 #fff, 0 -1px 0 #000;

테두리 반경

속성에 테두리 반경을 할당하는 편리한 작성 방법은 padding 및 margin(예: ). 일부 브라우저에서는 효과를 올바르게 렌더링하려면 속성 앞에 접두사를 추가해야 합니다. 예를 들어 웹킷 브라우저에서는 "border-radius: 20px" 접두사를 추가해야 하고, Firefox 브라우저에서는 "-webkit-' 접두사. -moz-

모서리마다 다른 반경을 설정할 수 있습니다. 웹킷과 파이어폭스 브라우저는 모서리마다 속성 이름이 다릅니다.

박스 섀도우

박스 섀도우의 구조는

속성과 동일합니다. , x-오프셋, y-오프셋, 흐림, 색상 순서입니다. text-shadow

상자 그림자에 다양한 효과를 설정할 수 있습니다. 예를 들어 다음 예에서는 매개변수 세트를 사용하여 효과를 설정합니다(매개변수는 쉼표로 구분됨).

아아앙

위 내용은 HTML5 실습 - CSS3의 여러 속성 text-shadow, box-shadow 및 border-radius에 대한 자세한 소개의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

성명

본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.

관련 기사

html5的div一行可以放两个吗Apr 25, 2022 pm 05:32 PM

html5的div元素默认一行不可以放两个。div是一个块级元素，一个元素会独占一行，两个div默认无法在同一行显示；但可以通过给div元素添加“display：inline;”样式，将其转为行内元素，就可以实现多个div在同一行显示了。

html5中列表和表格的区别是什么Apr 28, 2022 pm 01:58 PM

html5中列表和表格的区别：1、表格主要是用于显示数据的，而列表主要是用于给数据进行布局；2、表格是使用table标签配合tr、td、th等标签进行定义的，列表是利用li标签配合ol、ul等标签进行定义的。

html5怎么让头和尾固定不动Apr 25, 2022 pm 02:30 PM

固定方法：1、使用header标签定义文档头部内容，并添加“position:fixed;top:0;”样式让其固定不动；2、使用footer标签定义尾部内容，并添加“position: fixed;bottom: 0;”样式让其固定不动。

html5中不支持的标签有哪些Mar 17, 2022 pm 05:43 PM

html5中不支持的标签有：1、acronym，用于定义首字母缩写，可用abbr替代；2、basefont，可利用css样式替代；3、applet，可用object替代；4、dir，定义目录列表，可用ul替代；5、big，定义大号文本等等。

HTML5中画布标签是什么May 18, 2022 pm 04:55 PM

HTML5中画布标签是“<canvas>”。canvas标签用于图形的绘制，它只是一个矩形的图形容器，绘制图形必须通过脚本（通常是JavaScript）来完成；开发者可利用多种js方法来在canvas中绘制路径、盒、圆、字符以及添加图像等。

html5废弃了哪个列表标签Jun 01, 2022 pm 06:32 PM

html5废弃了dir列表标签。dir标签被用来定义目录列表，一般和li标签配合使用，在dir标签对中通过li标签来设置列表项，语法“<dir><li>列表项值</li>...</dir>”。HTML5已经不支持dir，可使用ul标签取代。

Html5怎么取消td边框May 18, 2022 pm 06:57 PM

3种取消方法：1、给td元素添加“border:none”无边框样式即可，语法“td{border:none}”。2、给td元素添加“border:0”样式，语法“td{border:0;}”，将td边框的宽度设置为0即可。3、给td元素添加“border:transparent”样式，语法“td{border:transparent;}”，将td边框的颜色设置为透明即可。