CSS3 필터링 효과의 간단한 예
- 高洛峰원래의
- 2017-03-04 10:41:291631검색
다음 편집기는 CSS3 필터링 효과의 간단한 예를 보여줍니다. 편집자님이 꽤 좋다고 생각하셔서 지금 공유하고 모두에게 참고용으로 드리고자 합니다.
위의 사진은 CSS3의 새로운 기능에 대한 필터 효과를 알아보고 나니, 우리 빅웹인들이군요. 미모와 멋짐, 코드로 사진을 완벽하게 아름답게 만드는 건 가능하지 않을까~~
자, 먼저 사진 뒤에 흰색 프레임을 구현해 볼까요,
으으으넣고 흰색 배경 프레임 작성 후 필터 적용 차례
먼저 첫 번째 사진을 찍어보자 예술적인 흑백
으으으두 번째 사진 어.. . 옛날사진.
세번째 사진, 역색? 무슨 색인지는 모르겠네요
<style>
#p1{
/*给p定义宽高和颜色*/
width: 200px;
height: 250px;
background: white;
/* 内填充距离照片为15px ，文字居中*/
padding: 15px;
text-align: center;
/* 把白色背景旋转-10deg */
-webkit-transform: rotate(-10deg);
/*给背景一个阴影的效果*/
box-shadow: 4px 4px 4px #666;
float: left;
}
</style>
<BR>
<body><BR>
<p id="p1">
<img src="img/001V28Mwty6Fww02IiNad&690.jpg" alt="CSS3 필터링 효과의 간단한 예" >
<p>灰色滤镜</p>
</p>
<BR>
</body>
네번째 사진은 하얀 안개가 겹겹이 덮힌 것 같아요
#p1 img{
/*把p1里面的图片百分百，等同于相对于在p1里面百分比放大填充*/
width: 100%;
/*把图片变成黑白色括号里跟颜色变化的值，只能取0~1之间*/
-webkit-filter: grayscale(1); }
거기 다른 사진입니다 렌더링에는 없지만 블러 효과 코드는 다음과 같습니다
#p1 img{
width: 100%;
-webkit-filter: sepia(1);
}
네 필터 공유는 마쳤으니 이쁜 사진으로 가겠습니다
위의 CSS3 필터링 효과에 대한 간단한 예시는 모두 편집자가 공유한 내용이므로 참고가 되셨으면 좋겠습니다. PHP 중국어 홈페이지도 지원해 주시길 바랍니다.
CSS3 필터링 효과에 대한 더 간단한 예와 관련 기사를 보려면 PHP 중국어 웹사이트를 주목하세요!
성명：
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
이전 기사：CSS 스타일 작성 형식의 자세한 예다음 기사：CSS 스타일 작성 형식의 자세한 예