�����ڵ�λ�ã���ҳ > �������� > �������� >

��Ӧ���˽��5��CSS3�¼���

��Դ�� ���α༭��admin ����ʱ��:2010-04-07 09:32�����:��

CSS��������֪��Ӧ�ù㷺����վ��ʽ���ԣ������İ汾��(CSS3)�ƻ��У�������һЩ�ܹ���ʡʱ������ԡ�����ֻ�е�ǰ������������汾����֧����Щ Ч�������˽����ǻ��DZ����Һ���Ȥζ�Եġ�����������ƪ��������չʾCSS�е�5����Ȥ���¼���:Բ�ǡ�����Բ�ǡ���͸���ȡ���Ӱ�͵���Ԫ�ش�С��

1���������

css3-�̳�
�����ǿ�ʼ����̳�֮ǰ���������������̶̳�Ҫʹ�õĻ�����ǡ�
���ǵ�xHTML��Ҫһ��divԪ��:

  • #round, ʹ��CSS3����ʵ��Բ��.
  • #indie, Ӧ�ø���ļ���Բ��.
  • #opacity, չʾ�µ�CSS3ʵ�ֲ�͸���ȵķ�ʽ.
  • #shadow,չʾ��ʹ�õ�����£�ʹ��CSS3��ʵ����ӰЧ��.
  • #resize, չʾ���ʹ��ij��CSS��ʵ�������С��Ч��.

�������������ǵ�xHTMLӦ����������:





An Introduction to CSS3; A Nettuts Tutorial









��resizable



��������������CSS�ļ�:

body    {
background-color: #fff;
}
#wrapper {
width: 100%;
height: 100%;
}
div {
width: 300px;
height: 300px;
margin: 10px;
float: left;
}

���������濴���ģ����Ǹ�ÿ��divԪ��300px�Ŀ�͸ߣ������������󸡶�������ҳ���div����������ں���Ĺ����������ʽ��

2:Բ��

css3-����
Ŀǰ���ԣ�����Բ�ǵķ����кܶ࣬�������鷳����õķ���:���ȣ���Ҫ����Բ�ǵ�ͼƬ��Ȼ����Ҫ�����ܶ�htmlԪ�ز�ʹ�ñ���ͼ��ķ�ʽ��ʾԲ�ǡ������������Ҷ��������

������⽫��CSS3�кܼ򵥵Ľ������Ǿ��ǽ�����border-radius�������ԡ������ȴ���һ����ɫ��divԪ�ز��������ú�ɫ�ı߿򡣱߿����Ҫʵ�֡�border-radius������Ч����ǰ�ᡣ
������:

#round {
background-color: #000;
border: 1px solid #000;
}

�������Ѿ�������divԪ�أ�������������Ԥ�ڵ�����һ����300px��͸������н����Ǻ�ɫ�ġ��������������ʵ��Բ�ǵĴ��룬������˵ļ�࣬������Ҫ���д��롣

#round {
background-color: #000;
border: 1px solid #000;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
}

���������������������ƵĴ��룬-moz-������Firefox���������-webkit-��������Safari/Chrome�������
ע:ĿǰΪֹIE�������֧��border-radius���ԣ������������IEҲ��Բ��Ч������ô��Ҫ�������Բ���ˡ�
border-radius�������ֱ������DZ߿�뾶����˼������ͬһ��������ֵԽ��Բ��Ҳ��Խ��

3:�����Բ��

css3-����
������չ�ȥ��ϰ�����������˷���ܶ�ʱ�䣬����CSS3�ܿ��ٽ��!
��������ֻ����div�����Ϻ�������Բ�ǣ���ô���������޸�:

#indie {
background-color: #000;
border: 1px solid #000;
-moz-border-radius-topright: 10px;
-moz-border-radius-bottomright: 10px;
-webkit-border-top-left-radius: 10px;
-webkit-border-bottom-left-radius: 10px;
}

����һ������������������ҳ�е�ʲôԪ���أ��ԣ����DZ�ǩʽ�ĵ�����ť��

4:��CSS3�ķ�ʽ�޸IJ�͸����

css3-�̳�
��������԰�������д���д�����ʵ�ֲ�͸���ȵ�Ч��(hack)������CSS3����������̡�
���д���ܺüǣ������� ��opacity: value;��:

#opacity {
background-color: #000;
opacity: 0.3;
}

5:��ӰЧ��

css3-�̳�
ʵ����ӰҲ�кܶ෽������õľ���ʹ����������ӰͼƬ��Ȼ��Ӧ�õ����������С���CSS3����Ĺ�������Ч�ʣ����ҵ��ǣ�Ŀǰֻ��Safari��Chrome֧����������ԡ�
������Ҫһ�д��룬��������4����ͬ��ֵ:

-webkit-box-shadow: 3px 5px 10px #ccc;

�� ����������һ�����ĸ�ֵ������ʲô����һ��3px��ָ����Ӱ��divԪ��֮���ˮƽ(����)���룬�ڶ���5pxָ������Ӱ��div֮��Ĵ�ֱ(����)�� �룬������10pxָ������Ӱ��ģ����(������photoshop�е���)��ֵԽ��Խϸ�塣����ֵ��˵���Ҳ֪����������Ӱ����ɫ��
����������ӰЧ�����룻

#shadow {
background-color: #fff;
border: 1px solid #000;
-webkit-box-shadow: 3px 5px 10px #ccc;
}

�����㿴���ģ����Ǹ����div�����˰�ɫ�ı�������ɫ�ı߿������ɫ����Ӱ��

6:������С

css3-�̳�
�����°汾��CSS�У�����Ԫ�صijߴ��Ѿ���Ϊ���ܣ�����Ŀǰ��Safari֧�֣�

ʹ ����������Ժ����ǵ�Ԫ�ص����½ǻ����һ��С��������ʾ�û����Ԫ���ǿ��Ե����ߴ�ġ�������Ȼ�ܼ򵥣�����˵����Ҫһ�д��룬��Ȼ�㻹�������ʹ�� һЩ����ʹ�ù������ԣ����硱max-width��, ��max-height��, ��min-width���� ��min-height��.

#resize {
background-color: #fff;
border: 1px solid #000;
resize: both;
overflow: auto;
}

��������Ҫ˵һ��resize��overflow���ԣ�resize:both;����˼�������б߶����Ե����ߴ磬����ֵ����horizontal��vertical������˼�壬���Ǻ�������򡣶�overflow��Ϊ�����resize�����ģ�������ʹ��auto.

�ܽ�

css3-�̳�
�� ô����������ƪ��������û��ʲô�ջ��أ���Ȼ���ڽ��к������������֧��CSS3�������ɷ��ϵ���CSS3��ȷ��Ϊ���ǵĹ�����ʡ�����ʱ�䡣�����Խ� ����ǿ�����˽����ʶ�Ļ������������Ȼ����CSS3���ǿ����°汾�ġ���Ҫ�ٰ����ʱ�䶼����IE6���ˣ�������ֻ�ܻ��ǹ�ʱ��ǰ�˿�������ʦ��

Ӣ��ԭ��:
����ԭ��:

����������� | �������´��� | ���Ȼ������� | ��˼��˴��� | ������������ | ƤƤ�������� | �Ա��̳�

    �������>>

    ��������
    ���Ծ����ػ�������ص����߷��棬�Ͻ�����ɫ�顢���������������ۡ�
    ��֤��:����Ҹ���ͼƬ
    �������� ����>>

    �Ƽ���Ʒ

    • <strong>�ⳤϣ�ȡ������ᡤ����������</strong>
    • ���Լ��϶��ᰴ���߼���˳����ǰ��
    • ��ý�������ҽ����й���ĸ���� ���У��ҵ
    • �չ�֧������һ��ҽԺǰ���м���
    • 30������CSS�ĵ����Ͱ�ť������ƽ̳�
    • ��CSS������������
    • Ϊ������Ŀ�����հ�CSSģ���ļ�
    • CSS �еĻƽ�ָ���
    • ��ѡ30�������CSS������ʵ��
    �ͻ����� - ��ط��� - �������� - ��վ��ͼ - TAG��ǩ - RSS����
    Copyright © 2004-2012 �ɶ��� ��Ȩ���� Power by DedeCms

    ��ICP��09012482��-1 ���籨�� ��ҵ����Ӫҵִ�� �й�������Э�� ֧�������� �������߸���